Google Developers Network 选项卡紫线

Question

我正在使用 nuxt js，我看到在这条紫色线之后正在下载一些代码：

现在我的问题是这行显示了什么，为什么下载的代码不会影响我的 Lighthouse 性能分数？

Answer 1

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

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

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

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

对于之后加载的内容，它仍然会影响您的性能，因为它会影响诸如累积布局移位、总阻塞时间等内容。这些行仅供参考。

如果您想计算页面的性能，最好使用开发者工具中的“性能”标签。

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