关键渲染路径

什么是关键渲染路径？

关键渲染路径（Critical Rendering Path）是指浏览器在处理和呈现网页时所经过的一系列步骤，这些步骤直接影响网页加载和渲染的速度

1.解析HTML

浏览器从服务器获取HTML文档，并对其进行解析，构建DOM树（Document Object Model），表示网页的结构。

2.解析CSS

浏览器解析外部CSS文件或内嵌样式，构建CSSOM（CSS Object Model），用于计算元素的样式和布局。

3.构建渲染树

浏览器将DOM树和CSSOM合并成为渲染树（Render Tree），渲染树只包含需要显示的元素，排除了不可见的元素。

4.布局和绘制

浏览器根据渲染树进行布局（Layout）和绘制（Painting），确定每个元素在屏幕上的位置和尺寸，并将最终的像素显示到屏幕上。

5.JavaScript执行

如果页面中有JavaScript代码，浏览器会执行它们，可能会修改DOM结构或样式，以及触发重绘或重新布局。

如何和优化关键渲染路径来提高网页性能？

• 减少HTTP请求：通过合并CSS和JavaScript文件、使用雪碧图或图标字体等方式，减少需要下载的资源数量。

• 压缩和优化资源：使用压缩算法对CSS和JavaScript进行压缩，使用图像压缩工具减小图像大小。

• 延迟加载：对于非关键资源，可以使用延迟加载技术（如懒加载）来推迟其加载时间，使页面更快地显示。

• 内联关键CSS和JS：将关键的CSS和JavaScript代码内联到HTML中，减少额外的HTTP请求。

• 使用浏览器缓存：为静态资源设置适当的缓存头信息，以便浏览器可以将它们缓存起来，加速后续的访问。