chrome Navigation Timing API渲染路径

让我们来快速回顾一下浏览器处理过程中的每一个步骤：

1. 处理HTML脚本，生成DOM树
2. 处理CSS脚本，生成CSSOM树
3. 将DOM树和CSSOM树合并为渲染树
4. 对渲染树中的内容进行布局，计算每个节点的几何外观
5. 将渲染树中的每个节点绘制到屏幕中

作为有效的性能策略的基础，准确的衡量和指导必不可少。这也就是Navigation Timing API为我们提供的。

 

 

上图中的每一个标签代表了浏览器在跟踪页面加载时捕获的每一个细粒度时间戳。而且在这个例子中，我们也仅仅为大家展现了各种不同的时间戳中的一部分而已。我们暂且跳过所有和网络相关的时间戳，在后面的课程中还会详细介绍。

那么，这些时间戳到底有什么含义呢？

• domLoading：这是整个加载进程开始的时间戳。浏览器从这个时间点开始解析收到的HTML页面的第一个字节。

• domInteractive：标记了浏览器完成解析HTML，DOM树构建完毕的时间。

• domContentLoaded：标记了DOM准备就绪且没有样式资源阻碍JavaScript执行的时间点，我们可以开始构建渲染树了。

• 很多JavaScript框架会在这个事件发生后才开始执行它们自己的逻辑。因此浏览器会通过捕获domContentLoadedEventStart和domContentLoadedEventEnd来计算执行框架的代码逻辑需要多长时间。

• domComplete：不言自明，所有的处理过程结束，所有的页面资源下载完成。浏览器窗口上表示页面还在加载的图标停止旋转。

• loadEvent：作为所有页面加载的最后一步，浏览器会在此时触发onLoad时间，以便开始附加的应用逻辑。

HTML的规范中指明了每一个事件的详细信息：什么时候触发，什么条件触发之类。在我们的教程中，我们会重点着眼于和关键渲染路径相关的事件：

• domInteractive：表示DOM准备就绪。

• domContentLoaded：表示DOM和CSSOM都准备就绪。如果没有JavaScript阻塞渲染，该事件会在domInteractive事件之后立即触发。

• domComplete：表示页面及其附属资源都已经准备就绪。

 

再附一张：

转载于:https://www.cnblogs.com/xiao-kkp/p/4031450.html