网站响应时间:`Load` 和 `Finish` 之间的差异

Website response time: Difference between `Load` and `Finish`

我需要检查网页的响应时间,所以我访问了 Chrome 上的站点,打开 Devtools 并切换到 Network 选项卡来检查响应时间:

如您所见,有两次:第一次是Finish,第二次是Load

我认为 Finish 是加载整个页面的所有资源(包括延迟)所花费的时间,但 Load 是什么?我想如果我将所有这些时间加在一起,我会得到 Load 的时间,但事实并非如此。

本网站的响应时间是多少,LoadFinish

Chrome Devtools 中的 Finish 时间包括页面上的异步加载(非阻塞)objects/elements 可能会在 onLoad 事件之后继续下载页面已触发。

网站的响应时间通常是指 Load 时间,因为这是用户可感知的时间,此时用户可以看到浏览器已完成加载并且页面已准备好显示在屏幕上。

Finish 时间,虽然从技术上讲也是响应时间,但对最终用户的影响不大。

在某些情况下,Finish 计时器似乎永远不会停止而是继续增加,因此它可能不是网页响应时间的最佳评估。

DevTools 在“网络”面板的多个位置显示 DOMContentLoaded 和加载事件的时间。 DOMContentLoaded 事件为蓝色,加载事件为红色。

https://i.stack.imgur.com/unni3.png