渲染过程
- 解析HTML生成DOM树
- 浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树
- 解析CSS生成CSSOM规则树
- 浏览器解析CSS文件并生成CSS规则树，每个CSS文件都被分析成一个StyleSheel对象
- 将DOM树与CSSOM规则树合并再一起生成渲染树
- 浏览器从DOM树的根节点开始遍历每个可见节点，对每个可见节点，找到其适配的CSS样式规则并应用
- 遍历渲染树开始布局（layout），计算每个节点的位置大小信息
- 布局阶段会从渲染树的根节点开始遍历，确定每个节点对象在页面上的确切大小与位置
- 将渲染树每个节点绘制到屏幕（paint）
渲染优化方案
通过优化渲染关键路径，可以优化页面渲染性能，减少页面白屏时间。
- 优化JS
- Js文件加载回阻塞DOM树的构建，可以给
<script>标签添加异步属性async
- Js文件加载回阻塞DOM树的构建，可以给
- 优化css
- 浏览器遇到
<link>标签时，需要向服务器发出请求获取CSS文件，才可以继续构建。 解决方案：合并所有CSS成一个文件，减少HTTP请求
- 浏览器遇到
