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

Posted

技术标签:

【中文标题】如何在 Chrome 开发工具中分析页面速度【英文标题】:How to analyzing Page Speed in Chrome Dev tools 【发布时间】:2015-10-22 03:12:12 【问题描述】:

我正在尝试了解 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 请求。这让我认为这些事件都不能真正代表页面何时可供用户查看。

【问题讨论】:

这个工具可能会有所帮助:365andup.com 【参考方案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 的角度来看:

您关心的唯一两个事件是 DOMContentLoadedLoad,因为这是浏览器运行您的 js 的时间。

考虑一下:

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

从用户角度:

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

好吧,要回答这个问题,您必须打开Timeline 面板。 在捕获线上选择:NetworkScreenshotPaint。 (这些并不是强制性的,但它们有助于理解)。

刷新页面。

您将看到 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

【讨论】:

我一直觉得很难记住(或找到)垂直线的含义。我希望他们在概览悬停时添加了一个工具提示 - 我刚刚注意到它在 Frames 窗格中。 Agee @BernhardHofmann,这个答案来自同样的挫败感。如果您想一想它对您的页面性能有多么重要,那真是令人难以置信。

以上是关于如何在 Chrome 开发工具中分析页面速度的主要内容,如果未能解决你的问题,请参考以下文章

如何在生产环境中分析请求?

在 Javascript 中分析异步函数

Reactjs 应用程序因打开的 Chrome 开发工具而变慢

在生产环境中分析正在运行的 ASP.NET 应用程序

如何在 Android Studio 中分析测试?

如何在 Eclipse 中分析 Eclipse 应用程序?