Web前端开发技术栈大系概览与核心知识体系

互联网兜兜转转五十多年，网站开发技术迭代了一轮又一轮，可万变不离其宗——Web前端终究逃不出浏览器，核心始终是那三件套：HTML、Ja vaScript、CSS。而围绕这三者，衍生出的框架和工具却早已铺成了汪&洋大海。 从2000年初入行做网站开发算起，技术栈换了好几茬：有些老伙计悄然退场，更多的新面孔蜂拥而至。前段时间梳理了一份 .NET技术大系概览（号称迄今为止最全的 .NET 技术栈），不少读者感慨自己掌握的技术连那幅图的一半都不到。这倒让我想——既然 .NET 和数据库都能画出完整的技术栈，那前端呢？ --- ### 爆栈三部曲 其实我陆续画过三张技术栈图： - Web前端开发大系概览（前端开发技术栈）——约180个技术点 - 数据库开发大系技术栈（300多技术点） - .NET技术大系概览（迄今为止最全的 .NET 技术栈） 这三张图被戏称为“爆栈三部曲”——因为每张图都试图把某个技术生态圈的所有基础“爆”出来，密不透风。 --- ### 问题 不妨扪心自问几个问题： Web前端开发到底包含哪些技术？ 你掌握的那一亩三分地，在整张前端技术大系里占了多大比例？ 还有多少技术你根本没碰过？ 面试官拿出来考你的，又在这张图的哪个角落？ 之前用一张栈图把 .NET 的庞大体系统统装了进去：  紧接着又画了数据库开发技术栈，三百多个点，同样一目了然：  那前端呢？有没有一张类似的全貌图？ 翻来覆去搜了很久，始终没找到一张真正“全面”的前端技术栈图。市面上流行的无非就是这几类——要么过于简略： 要么重点模糊： 还有这种看上去很酷，其实缺胳膊少腿的：  它们都远远没有把整个前端技术生态高度概括出来。我要的，是一张真正能撑起“大系”二字的图谱。 --- ### Web前端开发技术栈 现在满大街都在讲 Full Stack（全栈），说好听点是全栈工程师，说难听点就是万金油。我觉得自己算不上全栈，倒更像“爆栈”（Stack Overflow）——开个玩笑。 这份 Web前端开发技术栈，分成了大约20个层级，覆盖了约100个技术点，从底层的浏览器渲染引擎、Ja vaScript 引擎，一路到最顶层的跨平台解决方案，核心层级包括： - 浏览器渲染引擎、Ja vaScript 引擎 - HTML / Ja vaScript / CSS 三支柱 - 编辑器 - 编译任务 - 编译工具 - 打包、调试、质量测试 - JS 基础类库 - JS 类库 - UI 框架 - CSS 预处理器 - 模板 - 现代化 - 安全/模式 - 中间语言 - 跨平台解决方案 分类可能不完全准确，相关技术也会有遗漏——欢迎各位同行指正，一起把它补齐。 由于篇幅限制，这张图里并没有列出所有技术点（实在太多了）。先看个预览：  想看完整的高清大图？已经开源在 GitHub 上了。 --- ### GitHub 开源 项目名称：WebFrontEndStack 已在 GitHub 上公开，保留字为 __mceDel，不过可直接在仓库中查看完整技术栈图。 --- ### 交互式浏览 点击 **[这里]** 可以查看基于 HTML 的交互式图示（支持鼠标拖动和滚轮缩放），比静态图更直观。