关键渲染路径-详细过程

MDN解释

关键渲染路径是浏览器将 HTML，CSS 和 JavaScript 转换为屏幕上的像素所经历的步骤序列。优化关键渲染路径可提高渲染性能。关键渲染路径包含了 文档对象模型 (DOM)，CSS 对象模型 (CSSOM)，渲染树和布局。

步骤序列

1. 构建文档对象模型（生成DOM tree）
2. 构建CSS对象模型（生成CSSOM tree）
3. 构建渲染树（生成Render tree）
4. 布局（渲染树节点转为像素）
5. 绘制（计算像素渲染到屏幕上）

步骤分解

生成DOM

第一步就是生成DOM对象。实际上你从网络上获取的是字节，而浏览器使用的是所谓的DOM树。因此需要将这些字节转换为DOM树。

1. 你以字节形式接收页面。你的浏览器将其转换为文本
2. 文本被转换为节点
3. 节点被转换为“对象”
4. 生成所谓的DOM树

你可以通过开发者工具查看此过程的耗时

我们看到它消耗了4.938ms

当这个过程完成后时，浏览器将拥有页面的全部内容，但是为了能够渲染，浏览器必须等待CSS对象模型，也被称为CSSOM事件，它会告诉浏览器元素在渲染的时候应该是什么样子

生成CSSOM

对于CSS来说和上面提到的一样，浏览器需要将这些文件转换为CSSOM

CSS也是一个树结构。实际上，如果你将font-size放到父元素上，那么子元素将会继承它

在开发者工具里边被称为 recalculate style

CSS是关键渲染路径中最重要的元素之一，因为浏览器会阻塞渲染，直到接收完和处理完页面中所有的css文件，所以CSS会阻塞渲染

生成 Render Tree

CSSOM和DOM结合起来显示

布局

一切都必须以像素为单位进行计算。所以当你说一个元素的宽度为50%时，在幕后浏览器会将其转换为像素:

每次对渲染树进行更新或者视口大小发生改变，浏览器必须再次进行布局

绘制

此步骤是将所有这些转换为屏幕上的像素。这就是渲染步骤

js的影响

对于js的声明周期，你可以查看这篇

js的要点就是：你可能最关心的事件是DOMContentLoaded。这是DOM准备就绪的时候。

当浏览器最初加载html时，并在文本中遇到内联 <script>...</script> ,它无法继续构建DOM。它必须立即执行script。所以 DOM Content Loaded 只有可能在所有这样的脚本执行完后才会发生。

外联script（带有src属性）也会在脚本加载和执行的时候暂停DOM构建。所以DOM Content Loaded同样也会等待外联脚本

唯一的里外就是外联脚本有 defer 或者 async 属性。他们告诉浏览器继续处理而不必等待脚本。因此用户可以在script加载前先看到页面，这样对提升性能很有帮助。【译文】async vs defer

注意：

1. js在执行时如果CSSOM未完成，会等待CSSOM完成后再开始进行解析
2. 如果存在多个js，第一个js加载的时候，会通过预加载扫描程序来发现CSS和JS资源并同步下载

参考：

• How does browser page lifecycle sequence work?
• 浏览器渲染之关键渲染路径