前端系统学习：路线图【持续更新】

前端工程师路线

前端工程师的成长，两个视角：一是立足标准，系统性总结和整理前端知识，建立自己的认知和方法论；二是放眼团队，从业务和工程角度思考前端团队的价值和发展需要。

另外，除了自身领域知识和工程特点外，还需要了解程序员通用的编程能力和架构能力。

构建前端知识结构

前端基础模块，主要涵盖JS、CSS、HTML，浏览器原理及实践；更多工程实践，则需要打通前后端能力、了解运维等基础。

先说前端基础的知识架构，要重点关注逻辑性和完备性。通过目录结构就可以串联，然后分节点深入。

建立知识架构，可以辅助快速定位到它在知识架构中的位置，把一些相关的点讲出来。

那如何构建JavaScript的目录结构呢？

出发点是什么？回到计算机语言的维度：“用规定的文法，去表达特定语义，最终操作运行时的”一个过程。尝试给出一个这样的目录结构：

• 文法
  • 词法
    • 直接量
    • 关键字
    • 运算符
  • 语法：JS标准中有语法定义表。
    • 表达式
    • 语句
    • 函数
    • 对象
    • 模块
• 语义：语法和语义基本是一一对应关系
• 运行时：（程序=算法+数据结构）
  • 数据结构
    • 类型
      • 7种基本类型（A primitive value is a member of one of the following built-in types）
        • Undefined, Null, Boolean, Number, BigInt, String, and Symbol.
      • 7种语言类型（The specification types）
        • Reference, List, Completion, Property Descriptor, Environment Record, Abstract Closure, and Data Block
    • 实例
      • 应用和机制【内置对象部分（类似基础库，150+）】
  • 执行过程（算法）：从粗到细
    • 程序与模块
    • 事件循环
    • 微任务的执行
    • 函数的执行
    • 语句级的执行

HTML和CSS

• HTML（按功能和语言）
  • 元素：承载功能部分
    • 文档元信息：用来描述文档的一些基本信息
      • head里的：title、meta、style、link、base
    • 语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签
      • section、nav等，有自己的适用场景
    • 链接：提供到文档内和文档外的链接
    • 替换型元素：引入声音、图片、视频等外部元素替换自身的一类标签
      • img、video、audio等，替换型媒体类标签，用来引入外部内容。
    • 表单：用于填写和提交信息。
      • intpu、button等。
    • 表格：表头、表尾、单元格等表格的结构
    • 总集
  • 语言：标记语言，与编程语言相比，比较灵活。语言机制。
    • 实体
    • 命名空间
  • 补充标准
    • 如：ARIA，它是 HTML 的扩展，在可访问性领域，它有至关重要的作用。
• CSS（按功能和语言）
  • 语言
    • @rule
    • 选择器
    • 单位
  • 功能
    • 布局
      • 正常流
      • 弹性布局
    • 绘制
      • 图形相关：颜色和形状
      • 文字相关
    • 交互
      • 动画
      • 其他交互

浏览器的呢？

浏览器的API：用实际的代码去找——for in 遍历 window 的属性，再去找它的内容。

• 浏览器的实现原理和API
  • 实现原理（浏览器的设计原理）
    • 解析
    • 构建DOM树
    • 计算CSS
    • 渲染、合成和绘制
  • API
    • DOM
    • CSSOM
    • 事件
    • API总集合

前端工程实践

• 前端工程实践
  • 性能
    • 方法论
    • 技术体系
  • 工具链
    • 一致性
    • 团队技术管理的基础
  • 持续集成
    • daily build？不适用
  • 搭建系统
    • 好流行啊，怎么做？
  • 架构与基础库
    • 软件架构师：解决功能复杂性的问题
    • 服务架构师：解决高流量问题
    • 前端架构师呢？兼容性、复用、能力扩展？

追本溯源

有一些知识，背后有一个很大的体系，例如，我们对比一下 CSS 里面的两个属性：如opacity、display。回到这两个词的本意，就会发现：opacity 是个非常单纯的数值，表达的意思很清楚；而 display 的每一个取值背后都是一个不同的布局体系。我们要讲清楚 display，就必须关注正常流（Normal Flow）、关注弹性布局系统以及 grid 这些内容。

思考：你理解一个东西吗？当你在说 display 的时候，你在说什么呢？

追本溯源，其实就是关注技术提出的背景，关注原始的论文或者文章，关注作者说的话。

翻翻资料（一般 wiki 上就有）找找历史上的文章和人物，再顺藤摸瓜翻出来历史资料就可以了，如果翻出来的是历史人物（幸亏互联网的历史不算悠久），你也可以试着发封邮件问问。

这个过程，可以帮助我们理解一些看上去不合理的东西，有时候还可以收获一些趣闻，比如 JavaScript 之父 Brendan Eich 曾经在 Wikipedia 的讨论页上解释 JavaScript 最初想设计一个带有 prototype 的 scheme，结果受到管理层命令把它弄成像 Java 的样子（如果你再挖的深一点，甚至能找到他对某位“尖头老板”的吐槽）。

为什么javascript最初设计成prototype-based而不是class-based? www.zhihu.com/question/27…

根据这么一句话，我们再去看看 scheme，看看 Java，再看看一些别的基于原型的语言，我们就可以理解为什么 JavaScript 是现在这个样子了：函数是一等公民，却提供了 new this instanceof 等特性，甚至抄来了 Java 的 getYear 这样的 Bug。

七周七语言。读后再来看这篇文字。Mark，todo。

HTML是骨架，CSS是衣服，JS是动作。HTML5是更完整的骨架（删去了一些骨架），CSS3是更漂亮的衣服。

从前端涉及的知识结构从面儿上说可以分为四个大类：语言、环境、工具、计算机基础。

语言方面，html、css、js 以及 延伸出来的各种变体：如scss、ts。

环境方面，浏览器相关知识，Node，以及webview的相关知识。

工具方面，各种框架、打包工具，npm，发版/测试工具等。

计算机基础方面，数据结构、算法、协议、以及相关的数学知识等。