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

Question

我正试图了解Chrome Dev工具中的Network Tab,了解页面加载的时间以及网络选项卡底部的DomContentLoaded,Load和Finished之间的区别.

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

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

DOMContent已加载

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

从访问该网页的用户现在准备好了吗？

是否阻止呈现的JavaScript和CSS延迟这个活动？

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

加载事件

我想这个事件一旦完成下载并完全渲染就会被触发,这个颜色线是什么颜色,红线是2s标记但是在网络选项卡的底部它是红色的网络2.95s! ？

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

Answer 1

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

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

从技术角度来看:

DomContentLoaded:

DomContentLoaded完全下载和解析初始HTML文档时会触发该事件.

请考虑:

如果您有<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.

表面处理:

Finished下载HTML + BLOCKING + NON BLOCKING资源时会触发该事件 解析了所有XMLHttpRequest()并Promise完成了.

如果您有一个检查更新的循环,您将继续看到更新此值.

从JavaScript的角度来看:

您关心的唯一两个事件是DOMContentLoaded,Load因为浏览器将运行您的js.

考虑一下:

DOMContentLoaded == window.onDomReady()
Load == window.onLoad()

从用户的角度来看:

那么,作为一个用户,我感觉页面快？秘密是什么？

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

刷新页面.

您将看到3条垂直线:

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

现在,什么是第一漆？这是什么意思？

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

从用户体验的角度来看,用户必须尽快开始看到某些内容(甚至是页面呈现).谷歌有300毫秒(完成800毫秒),亚马逊大概是1.6秒(完成41秒)

对于SEO:

对于SEO无后顾之忧.这更容易.使用PageSpeed Insights并按照建议操作.

参考文献:

• DOMContentLoaded vs Load
• 可笑的快速页面加载