一名合格的前端工程师需要掌握的浏览器渲染笔记

ps：本文整体思路主要参考极客时间专栏-浏览器工作原理与实践[1]（推荐，讲的不错），文中部分图片画起来比较复杂，也直接采用了文中的图片，仅供学习。

整体流程

---

• 1、解析HTML，构建DOM树

• 2、解析CSS，生成CSS规则树

• 3、合并DOM树和CSS规则，生成Render树（页面布局）

• 4、绘制Render树（paint），绘制页面像素信息

• 5、显示

1、构建DOM树

---

因为浏览器无法直接理解和使用html，所以需要将html转换为浏览器能够理解的结构——DOM树。在渲染引擎内部，有一个叫 HTML 解析器（HTMLParser）的模块，它的职责就是负责将 HTML 字节流转换为 DOM 结构。

• 1、解码：浏览器将接收的字节流（Bytes）基于编码方式解析为字符（characters）

• 2、分词：通过分词器（也就是词法分析）将字符转换为 Token，分为Tag Token 和文本Token

• 3、tokens->nodes

• 4、nodes->DOM

第3步和第4步其实是同时进行的，需要将 Token 解析为 DOM 节点，并将 DOM 节点添加到 DOM 树中。此过程HTML 解析器通过维护了一个Token栈结构来完成。

• 如果是StartTag Token，就会创建一个DOM节点，并推入栈

• 如果是文本 Token，就会生成一个文本节点，然后将直接该节点加入到 DOM 树中

• 如果是EndTag Token，会查看栈顶元素是否为对应的StartTag Token，如果是则弹出，该节点解析完成。

具体实现可以参考Vue.js的HTMLParser实现[2]