【前端学习 - 浏览器（6）浏览器解析渲染页面】

1、浏览器解析渲染页面**

浏览器拿到响应文本 HTML 后，接下来介绍下浏览器渲染机制

浏览器解析渲染页面分为一下五个步骤：

• 根据 HTML 解析出 DOM 树
• 根据 CSS 解析生成 CSS 规则树
• 结合 DOM 树和 CSS 规则树，生成渲染树
• 根据渲染树计算每一个节点的信息
• 根据计算好的信息绘制页面

1-1.根据 HTML 解析 DOM 树

根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点。 在读取 HTML 文档，构建 DOM 树的过程中，若遇到 script 标签，则 DOM 树的构建会暂停(js单线程的原因)，直至脚本执行完毕。

1-2.根据 CSS 解析生成 CSS 规则树

解析 CSS 规则树时 js 执行将暂停，直至 CSS 规则树就绪。 浏览器在 CSS 规则树生成之前不会进行渲染。

1-3.结合 DOM 树和 CSS 规则树，生成渲染树

DOM 树和 CSS 规则树全部准备好了以后，浏览器才会开始构建渲染树。 精简 CSS 并可以加快 CSS 规则树的构建，从而加快页面相应速度。

1-4.根据渲染树计算每一个节点的信息（布局）

重绘：

某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。

回流：

某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染

回流什么时候发生？

• 添加或者删除可见的DOM元素；
• 元素位置改变；
• 元素尺寸改变——边距、填充、边框、宽度和高度
• 内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
• 页面渲染初始化；
• 浏览器窗口尺寸改变——resize事件发生时；

1-5.根据计算好的信息绘制页面

绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。