重学前端【极客】

在快速入门前端之后，大多数人都会感觉自己停留在使用阶段，后面的学习之路似乎越来越艰难，很有可能在学习过程中走了弯路。

大部分前端工程师的知识，其实都来自工作中零散的学习和实践。在这种情况，学习方向一旦偏离，可能导致基础不牢固，知识认知不清晰。

今天，重学前端将带你告别零散和盲目的自学，重新学习前端，一起搭建前端知识框架，共同明确学习重点，精进前端技术。

文章略长，请保持一点耐心。

壹｜学习路线+架构图

随着前端快速的发展，需要学习的知识点也越来越多，从而出现了前端开发之痛：散点自学 + 基础不牢。

很多前端的基础知识点，表面上可能是一时忘记或者之前没注意，实际上是对于前端知识体系和底层原理没有真正系统的理解。

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

0 基础入门的同学，可以阅读基本经典前端教材，比如《JavaScript 高级程序设计》、《精通 CSS》等，阅读一些参考性的网站也是不错的选择，比如 MDN。

已经有了 1 年以上工作经验的前端同学，有两个不错的学习方法。一个是建立知识架构，一个是追本溯源。

在 JavaScript 的模块中，首先我们可以把语言按照文法、语义和运行时来拆分，这符合编程语言的一般规律：用一定的词法和语法，表达一定语义，从而操作运行时。

在 HTML 的部分，我们会按照功能和语言来划分它的知识，HTML 的功能主要由标签来承担。

在 CSS 的部分，语言部分会从大到小介绍 CSS 各种语法结构，比如 @rule、选择器、单位等。功能部分可以分为布局、绘制和交互类。

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

贰｜JavaScript 类型

JavaScript 类型包含 Undefined、Null、Boolean、String、Number、BigInt、Symbol、Object。

Undefined 类型表示未定义，只有一个值就是 undefined。undefined 是一个变量，而并非一个关键字，所以建议使用 void 0 获取 undefined 值。

Null 类型表示定义了但是为空，只有一个值就是 null。null 是关键字，任何代码都可以用 null 获取 null 值。

Boolean 类型有两个值 true 和 false，表示逻辑上的真和假，true 和 false 都 是关键字。

String 类型表示文本数据,一旦被创建，就不能被修改。String 最大长度是 2^53-1「元素对应一个下标，而下标最大整数是 2^53-1」，String 的意义是字符串的 UTF16 编码，字符串的操作 charAt、length 等方法都是 UTF16 编码。所以，字符串的最大长度是受字符串的编码长度影响的。

Number 类型表示数字，大致对应数学中的有理数。Number 类型有 2^64-2^53+3 个值「64 位双精度浮点数为2^64；2^53 即 11 位指数位全为 1 达到边界的情况，小数位不为 0 即超过最大值为 NaN，小数位为 0 则是 Infinity 和 -Infinity；3 即 NaN、Infinity、-Infinity」。NaN 表示 2^53-2 个值「53 即 52 个小数位和 1 个符号位，减去的 2 代表 Infinity 和 -Infinity」。Number 类型符合 IEEE754 规定的双精度浮点数规则。非整数的 Number 类型无法用 == 或 === 比较。「无限循环小数，小数位只有52位，精度丢失」

BigInt 类型表示数值类型，可以用任意精度表示整数。使用 BigInt，您可以安全地存储和操作大整数，甚至可以超过数字的安全整数限制。

Symbol 类型表示一切非字符串的对象 key 的集合，Symbol 类型是唯一的并且是不可修改的。

Object 类型表示对象的意思，它是一切有形和无形物体的总称。对象的定义是数据的集合，属性分为数据属性和访问器属性。

说完基本类型，我们来介绍一个现象：类型转换。

装箱转换是把基本类型转换成对应的对象，可以利用一个函数的 call 方法来强制产生装箱。

拆箱转换是把对象类型转换成基本类型，拆箱转换会先调用 valueOf 和 toString 来获取基本类型，也可以通过显示指定 Symbol.toPrimitive 属性来覆盖原有的行为。如果都没有获取到基本类型，则会产生类型错误 TypeError。

叁｜JavaScipt 执行

JavaScript 执行中，我们把宿主发起的任务称为宏观任务，把 JavaScript 引擎发起的任务称为微观任务。

闭包其实只是一个绑定了执行环境的函数。JavaScript 中的函数完全符合闭包的定义。它的环境部分是函数词法环境部分，它的标识符列表是函数中用到的未声明变量，它的表达式部分就是函数体。

JavaScript 标准把一段代码（包括函数），执行所需的所有信息定义为执行上下文。

在 ES2018 中，执行上下文包含lexical environment、variable environment、code evaluation state、Function、ScriptOrModule、Realm、Generator。

调用函数时使用的引用，决定了函数执行时刻的 this 值。

当一个函数执行时，会创建一条新的执行环境记录，记录的外层词法环境会被设置成函数的[[Environment]]。

代码执行遇到 this 时，会逐层检查当前词法环境记录中的[[ThisBindingStatus]]，当找到有 this 的环境记录时获取 this 的值。

Completion Record 表示一个语句执行完之后的结果，它有三个字端：

• [[type]] 表示完成的类型，有 break conotinue return throw 和 normal 几种类型
• [[value]] 表示语句的返回值，如果语句没有，则是 empty
• [[target]] 表示语句的目标，通常是一个 JavaScript 标签

Chrome 控制台显示的是语句的 Completion Record 的[[value]]。

肆｜JavaScript 词法与语法

JavaScript 的词法包含空白符号、换行符、注释、标识符名称、符号、数字直接量、字符串直接量、正则表达式直接量、字符串模版。

按照编译原理相关的知识，分析工作可以分成以下几个步骤：

• 词法定义和语法定义
• 词法分析：把输入的字符串变成 token
• 语法分析：把 token 变成抽象语法树 AST
• 解释执行：后序遍历 AST，执行得出结果

自动插入分号规则：

• 要有换行符，且下一个符号是不符合语法的
• 有换行符，且语法中规定此处并不能有换行符
• 源代码结束处，不能形成完整的脚本或者模块结构

no LineTerminator here 规则：

• 带标签的 continue 语句，不能在 continue 后插入换行
• 带标签的 break 语句，不能在 break 后插入换行
• return 后不能插入换行
• 后自增、后自减运算符前不能插入换行
• async 关键字后面不能插入换行
• 箭头函数的箭头前不能插入换行
• yield 之后，不能插入换行

不写分号需要注意的情况：

• 以括号开头的语句
• 以数组开头的语句
• 以正则表达式开头的语句
• 以 template 开头的语句

JavaScript 有两种源文件，一种叫做脚本，一种叫做模块。

伍｜HTML和CSS

HTML 语义类标签增强了可读性，即便是在没有 CSS 的时候，也可以清晰看出网页的结构。

CSS 的顶层样式表由两种规则组成列表构成，一种是 at 规则，另一种是普通规则。

凡是替换型元素，都是使用 src 属性来引用文件；链接型元素都是使用 href 标签。

CSS 用 transition 和 animation 两个属性来实现动画，背后的原理是贝塞尔曲线。

HTML 语法源自 SGML，包含了五种节点：标签、文本、注释、文档类型定义和处理信息。

陆｜浏览器实现原理与API

一个 URL 变成屏幕上的网页过程是这样的：

1. 浏览器首先使用 HTTP 协议或者 HTTPS 协议，向服务器请求页面
2. 把请求回来的 HTML 代码经过解析，构建成 DOM 树
3. 计算 DOM 树上的 CSS 属性
4. 根据 CSS 属性对元素逐个进行渲染，得到内存中的位图
5. 一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度
6. 合成之后，再绘制到界面上

HTTPS 有两个作用，一是确定请求的目标服务端身份，二是保证传输的数据不会被网络中间节点窃听或者篡改。

HTTP2.0 最大的改进有两点，一是支持服务端推送，二是支持 TCP 连接复用。

通过栈构建 DOM 树：

• 栈顶元素就是当前节点
• 遇到属性，就添加到当前节点
• 遇到文本节点，如果当前节点是文本节点，则跟文本节点合并，否则入栈成为当前节点的子节点
• 遇到注释节点，作为当前节点的子节点
• 遇到 tag start 就入栈一个节点，当前节点就是这个节点的父节点
• 遇到 tag end 就出栈一个节点

浏览器的位图操作部分包括了渲染、合成和绘制三个部分。渲染过程把元素变成位图，合成把一部分位图变成合成层，最终的绘制过程把合成层显示到屏幕上。

DOM API 包含节点、事件、Range、遍历。

DOM 中所有的属性都是用来表现语义的属性，CSSOM 则都是表现的属性。

捕获是计算机处理输入的逻辑，冒泡是人类理解事件的思维，捕获总是在冒泡之前发生。

柒｜前端综合应用

性能问题可以分为很多方面，最重要的几个点是：

• 页面加载性能
• 动画与操作性能
• 内存、电量消耗

线上监控，分为两个部分：

• 数据采集
• 数据展现

工具链的设计：

• 初始化项目
• 运行和调试
• 测试（单元测试）
• 发布

工具体系的监控：

• 调试/构建次数
• 构建平均时长
• 使用的工具版本
• 发布次数

持续集成的方案：

• 预览环境，代替每日构建
• 规则校验，代替构建验证测试

搭建系统是为了应对大量简单页面的生产需求而设计的一种工具型产品，搭建系统产生的数据监控关键的指标是用户访问数和生产页面数。