如何在Chrome开发工具中分析Page Speed

Question

我正试图了解Chrome Dev工具中的网络标签，了解网页加载的时间以及网络标签底部的DomContentLoaded，Load和Finished之间的区别。

从用户的角度来看，页面何时可以阅读，查看，与之交互？是DomContentLoaded，加载还是完成？

从SEO的角度来看，谷歌用来衡量网页速度的事件是什么？

已加载DOMContent

据我所知，DOMContent加载意味着WebPages HTML文档已被浏览器下载和解析，但资产如图像，css和amp; javascript可能仍然需要下载，这是正确的吗？

来自访问该网页的用户目前是否准备就绪？

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

在上面的Chrome网络标签中，为什么DOMContentLoaded 1.97s位于蓝色文本的底部但时间线中的蓝线恰好在3秒标记之前？

加载活动

我想这个事件在所有内容完成下载并完全渲染后被触发，这是由什么颜色线表示的，红线是2s标记但在网络选项卡的底部它表示网络2.95s在红色！？

这是一个考虑页面是否已准备好为用户查看的好点。如果您查看amazon.co.uk，这不会持续大约14秒，完成时间一直持续到3.5分钟，我认为这是Ajax请求。这让我觉得当Page准备好供用户查看时，这些事件都不会真正代表。

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

现在，First Paint是什么？这是什么意思？

这意味着Chrome开始向用户呈现内容。 如果您查看屏幕截图，您将能够看到用户何时拥有与之交互的页面的最小版本。

从用户体验的角度来看，用户开始尽快看到某些内容（甚至是页面呈现）非常重要。 Google有300毫秒（完成800毫秒），亚马逊约为1.6秒（完成41秒）

对于搜索引擎优化：

对于SEO无后顾之忧。它更容易。使用PageSpeed Insights并按照建议进行操作。

的参考文献：

• DOMContentLoaded vs Load
• Ludicrously Fast Page Loads