Google Developers Network 选项卡紫线

Question

我正在使用 nuxt js，我看到在这条紫色线之后正在下载一些代码：现在我的问题是这一行显示了什么，为什么下载的代码不会影响我的 Lighthouse 性能得分？

Answer 1

这条线实际上不是紫色的，它是一条红线和一条蓝线并排在一起。

蓝线是“DOM 内容加载”时间，红色是“加载”时间。

“DOMContentLoaded”事件在文档加载完毕且 DOM 树完全构建时触发。

“加载”事件在所有子框架、图像、样式表、脚本等都已下载后触发。（这会忽略诸如延迟脚本、异步脚本等内容，因为从技术上讲，它们不是初始文档的一部分）

至于在它之后加载的内容，它仍然会影响您的性能，因为它会影响诸如 Cumulative Layout Shift、Total Blocking Time 等内容。这些线仅供参考。

如果您尝试计算页面的性能，最好使用开发人员工具中的“性能”选项卡。

这使您可以运行完整的跟踪并突出显示更有意义的指标，例如首次绘制、首次内容绘制、最大内容绘制（在“时间”部分下）和“体验”部分下的任何累积布局偏移等。