如何在 Chrome 开发工具中分析页面速度

Question

我正在尝试了解 Chrome 开发工具中的网络选项卡，以了解页面加载所需的时间以及网络选项卡底部的 DomContentLoaded、Load 和 Finished 之间的区别。

从用户的角度来看，页面何时可以阅读、查看、交互等？是 DomContentLoaded、Load 还是 Finished？

另外，从 SEO 的角度来看，Google 使用什么事件来衡量页面速度呢？

已加载 DOM 内容

据我了解，DOMContent 加载意味着 WebPages HTML 文档 已被浏览器下载并解析，但可能仍需要下载图像、css 和 javascript 等资产，这是否正确？

从访问该网页的用户来看，此时它准备好了吗？

render-blocking JavaScript and CSS 会延迟这个事件吗？

在上面的 Chrome 网络选项卡中，为什么 DOMContentLoaded 1.97s 在底部以蓝色文本显示，而时间轴中的蓝线正好在 3 秒标记之前？

加载事件

我想一旦所有内容完成下载并完全渲染，就会触发此事件，这是什么颜色的线，因为红线再次位于 2s 标记处，但在 Network 选项卡的底部它显示 Network 2.95s红色！？

这是考虑页面已准备好供用户查看的好时机。如果您查看amazon.co.uk，这还不到 14 秒，而 完成时间 一直到 3.5 分钟，我认为这是 Ajax 请求。这让我认为这些事件都不能真正代表页面何时可供用户查看。

Answer 1

按 Enter 后浏览器中发生了什么？

• 浏览器下载文件
• 浏览器解析文件
• 浏览器计算 javascript 事件和渲染操作

从技术角度：

DomContentLoaded：

当初始 HTML 文档完全下载和解析时，DomContentLoaded 事件被触发。

请考虑：

如果你有<script src="test.js"></script>:
1.浏览器下载解析index.html和test.js
2. 浏览器解析和评估脚本
3. 浏览器会触发DomContentLoaded

如果你有<script src="test.js" async></script>:
1.浏览器下载解析index.html
2. 浏览器会触发DomContentLoaded
同时是下载js

加载：

Load 事件在页面完全加载时触发，因此当 HTML 和 BLOCKING 资源被下载和解析时。

BLOCKING 资源是 CSS 和 Javascript。 NOT BLOCKING 是异步 javascript。

完成：

下载 HTML + BLOCKING + NON BLOCKING 资源时会触发 Finished 事件 |解析完所有XMLHttpRequest()和Promise。

如果您有一个正在检查更新的循环，您将不断看到更新此值。

从 javascript 的角度来看：

您关心的唯一两个事件是 DOMContentLoaded 和 Load，因为这是浏览器运行您的 js 的时间。

考虑一下：

DOMContentLoaded == window.onDomReady()
加载 == window.onLoad()

从用户角度：

那么，作为一个用户我什么时候觉得页面快？秘诀是什么？

好吧，要回答这个问题，您必须打开Timeline 面板。 在捕获线上选择：Network、Screenshot 和 Paint。 （这些并不是强制性的，但它们有助于理解）。

刷新页面。

您将看到 3 条垂直线：

• 1 条蓝线：DomContentLoaded 事件
• 1红线：加载事件
• 1 条绿线：First Paint

现在，第一个油漆是什么？这是什么意思？

这意味着 Chrome 开始向用户呈现一些东西。 如果您检查屏幕截图，您将能够看到用户何时可以使用最小版本的页面进行交互。

从用户体验的角度来看，用户尽快开始看到某些东西（甚至是页面渲染）很重要。 Google 有 300 毫秒（完成 800 毫秒），亚马逊大约是 1.6 秒（完成 41 秒）

对于 SEO：

对于 SEO，不用担心。这要容易得多。使用PageSpeed Insights 并按照建议进行操作。

参考资料：

• DOMContentLoaded vs Load
• Ludicrously Fast Page Loads