一、渲染机制
流程图
整体来说，整个过程可以分为五个步骤：
- 根据 HTML 解析出 DOM 树
- 根据 CSS 解析生成 CSS 规则树
- 结合 DOM 树和 CSS 规则树，生成渲染树
- 根据渲染树计算每一个节点的信息并完成布局
- 根据计算好的信息绘制页面
二、根据HTML解析DOM树
- 根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点。
- 在读取 HTML 文档，构建 DOM 树的过程中，若遇到 script 标签，则 DOM 树的构建会暂停，直至脚本执行完毕。
三、结合 DOM 树和 CSS 规则树，生成渲染树
- DOM 树和 CSS 规则树全部准备好了以后，浏览器才会开始构建渲染树（面试时自己就说了两棵树- -）。
四、根据计算好的信息绘制页面
- 绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将渲染树的内容显示在屏幕上。
- 除此以外，这里还有两个比较重要的概念，重绘与回流，后续继续补充
网友评论