作为前端你不得不知的秘密之浏览器如何渲染页面

浏览器如何渲染页面

从HTML 到 DOM

1. 字节流解码

浏览器通过HTTP协议收到的文档内容是字节数据，当浏览器得到字节数据后，通过 编码嗅探算法 来确定字符编码，然后根据字符编码将字节流数据进行解码。

把字节数据解码生成字符数据的过程 称之为 字节流解码

2. 输入流预处理

上一步解码得到的字符流数据在进入解析环节之前还需要一些预处理操作。 比如将换行符转换成统一的格式，最终生成规范化的字符流数据。这个把字符数据进行统一格式化的过程称之为 输入流预处理

3. 令牌化

经过前两步的数据解码和预处理，下面就要进入重要的解析步骤。
解析包括两步，第一步是将字符数据转化成令牌（Token）
第二步是解析HTML生成DOM树
先来说说令牌化，其过程是使用了一种类似状态机的算法，即每次接收一个或多个字符流种的字符；然后会根据当前状态和这些字符更新下一个状态，也就是说在不同状态下接收同样的字符数据可能产生不同的结果，比如接收到”body“字符串时，在标签打开状态会解析成标签，在标签关闭状态会解析成文本节点。

4. 构建DOM树

解析HTML的第二步是树构建

浏览器在构建解析器的同时会创建一个Document对象。在构建阶段，Document会作为根节点不断的修改和扩充。 标记步骤产生的令牌会被送到树构建器进行处理。HTML5标准中定义了每类令牌对应的DOM 元素，当树构建器接收到某个令牌时就会创建该令牌对应的DOM元素并将该元素插入到DOM树中。

还有从CSS 到 CSSOM

从DOM 到渲染

有了 DOM树和CSSOM树之后，渲染引擎就可以开始生成页面了

5.构建渲染树

DOM树包含的结构内容和CSSOM树包含的样式规则都是独立的，为了更方便渲染，先需要将它们合并成一棵渲染树

6. 布局

生成渲染树之后，就可以进入布局阶段了，布局就是计算元素的大小和位置

7.绘制

绘制就是将渲染树中的每个节点转换成屏幕上实际像素的过程