如何在 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 的角度来看:
您关心的唯一两个事件是 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【讨论】:
我一直觉得很难记住(或找到)垂直线的含义。我希望他们在概览悬停时添加了一个工具提示 - 我刚刚注意到它在Frames
窗格中。
Agee @BernhardHofmann,这个答案来自同样的挫败感。如果您想一想它对您的页面性能有多么重要,那真是令人难以置信。以上是关于如何在 Chrome 开发工具中分析页面速度的主要内容,如果未能解决你的问题,请参考以下文章