关键渲染路径流程

简介

关键渲染路径（Critical Rendering Path）指的是浏览器在处理从服务器请求到页面呈现的整个过程，并且影响着页面的性能优化。它是优化页面渲染速度的重要一环。

流程

1. 请求

在浏览器中输入网址，浏览器向服务器发送请求。如果该请求包含了一些必备的资源，如HTML、CSS、JavaScript等，则服务器将相应的资源发送回浏览器。

2. HTML解析

浏览器下载完HTML文件后，开始解析文件，构建DOM树（Document Object Model）。DOM树是由浏览器通过HTML标记解析得到的完整的对象模型，其中，每个HTML元素都是模型中的一个节点。

3. CSS解析

与HTML解析类似，浏览器解析CSS样式表，构建CSSOM树（CSS Object Model）。CSSOM树是由浏览器通过CSS样式解析得到的一个对象模型，其中，每个CSS样式规则都是模型中的一个节点。

4. 渲染树构建

一旦浏览器解析完HTML和CSS，它就会结合它们的内容构建出渲染树（Render Tree）。渲染树是由浏览器将DOM树和CSSOM树结合起来构建得到的。

渲染树只包含浏览器需要显示的节点，比如可见的HTML元素和一些用户屏蔽的元素（如script标签、meta标签等）则不会包含进来。渲染树的每个节点都包含了其对应的样式信息和计算过的位置信息。

5. 布局和绘制

浏览器布局和绘制阶段是最后一个重要的步骤。在这个步骤中，浏览器会遍历渲染树并计算出每个节点的几何位置信息，并生成相应的“盒子模型”。

然后，浏览器进入绘制（Painting）阶段，其中，控制多个层的组合过程，形成最终的页面图像。

6. 优化

优化是整个关键渲染路径的重点，可以分为如下几个方面：

• 资源文件的压缩和合并
• 正确的资源文件加载顺序
• 减少JavaScript和CSS的阻塞
• 合理使用浏览器缓存机制

结论

关键渲染路径是非常重要和必须要了解的一个概念。想要实现优秀的web性能，必须深刻理解这一概念并且不断地进行优化。