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

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

从用户的角度来看，页面何时准备好阅读、查看、交互等？它是装载的、装载的还是完成的

从搜索引擎优化的角度来看，谷歌用什么事件来衡量页面速度呢

DOMContent已加载

据我所知，DOMContent loaded意味着网页HTML文档已被浏览器下载和解析，但图像、css和javascript等资产可能仍需下载，对吗

从访问网页的用户那里，现在是否准备好了

这件事耽搁了吗

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

加载事件

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

这是一个考虑页面准备好为用户查看的好点。如果你看一下，这要到14秒左右，完成时间一直持续到3.5分钟，我想这是Ajax请求。这让我觉得这两个事件都不能真正代表页面何时可以供用户查看。

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

• 浏览器将下载该文件
• 浏览器解析文件
• 浏览器计算javascript事件和呈现操作

从技术角度来看： DomContentLoaded： 当初始HTML文档完全下载和解析后，将触发

DomContentLoaded

事件

请考虑： 如果您有一个

：
1.浏览器下载并解析index.html和test.js
2.浏览器分析和评估脚本
3.浏览器将触发一个

DomContentLoaded

如果您有一个

：
1.浏览器下载并解析index.html
2.浏览器将触发一个

DomContentLoaded

同时下载js

负载：

Load

事件在完全加载页面时触发，因此在下载和解析HTML和阻塞资源时触发

阻塞资源是CSS和Javascript。 非阻塞是异步javascript

完成： 下载HTML+阻塞+非阻塞资源并解析所有

XMLHttpRequest（）

和

Promise

时，将触发

Finished

事件

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

从javascript的角度来看： 您唯一关心的两个事件是

DOMContentLoaded

和

Load

，因为此时浏览器将运行js

考虑一下： DOMContentLoaded==window.onDomReady（）
Load==window.onLoad（）

从用户的角度来看： 那么，作为一个用户，当我觉得页面快了？秘密是什么

那么，要回答这个问题，你必须打开

时间线

面板。 在捕获行上选择：

Network

、

Screenshot

和

Paint

。（这些不是强制性的，但有助于理解）

刷新页面

您将看到3条垂直线：

• 1蓝线：DomContentLoaded事件
• 1红线：加载事件
• 1绿线：第一道漆

现在，第一幅画是什么？这是什么意思？ 这意味着它开始向用户呈现一些东西。 如果您查看屏幕截图，您将能够看到用户何时可以使用页面的最低版本进行交互

从用户体验的角度来看，让用户尽快开始看到一些东西（甚至页面呈现）是很重要的。谷歌有300毫秒（终点800毫秒），亚马逊大约有1.6秒（终点41秒）

对于搜索引擎优化： 对于搜索引擎优化没有任何担心。这容易多了。使用下面的方法并遵循建议

参考资料：

---

这个工具可能会有帮助：我总是发现很难记住（或找到）垂直线的含义。我希望他们能在概述的悬停部分添加一个工具提示-我刚刚注意到它在

框架

窗格中。Agee@BernhardHofmann，这个答案来自同样的沮丧。如果你想一想它对你的页面性能有多重要，这是难以置信的。