javascript - 使用 Javascript 的 window.performance.timing 计算页面加载时间

Question

我可以使用以下代码计算 selenium 中的页面加载时间:

代码:Selenium C#

using OpenQA.Selenium;
double requestStart = (long)((IJavaScriptExecutor)CTest.Driver).ExecuteScript("return window.performance.timing.requestStart");
double domComplete = (long)((IJavaScriptExecutor)CTest.Driver).ExecuteScript("return window.performance.timing.domComplete");
var totaltime = domComplete - requestStart;

通过试错，我能够确定上面代码中的totaltime对应于下图中的值Load。图像中的 Load 似乎总是与 DOMContentLoaded 变量的值相同。

问题:

1. 为什么 Finish 的值不同？什么是Finish？如何使用 javascript 的 window.performance.timing 对象计算它？
2. 如何计算在网络浏览器中输入 URL(并按下回车键)与最终加载页面上所有内容之间的时间？

以下文档很好地描述了每个时序变量测量的内容 mozilla-developer timestamp variables ，但 chrome devtools 中的 Finish 值正在搅浑水。

图:从 Chrome 的 Devtool (F12) 网络选项卡中提取性能信息

---

编辑:

感谢@wOxxOm。我注意到，随着我与网站交互(转到网站中的不同页面)，完成时间不断增加，而 DOMContentLoaded 和 Load 从未改变在初始加载事件之后。这与您在回复中所说的相对应。 我按照您的建议改用以下代码:

double connectStart = (long)((IJavaScriptExecutor)CTest.Driver).ExecuteScript("return window.performance.timing.connectStart");
double loadEventEnd = (long)((IJavaScriptExecutor)CTest.Driver).ExecuteScript("return window.performance.timing.loadEventEnd");
double newMeasure = (loadEventEnd - connectStart) / 1000.0;

还开始研究 Chrome 77 中的 LCP 功能。

我还有一个问题

问题 2: 我最初认为 window.performance 对象中的值会在我单击链接(在网站上)时用新值(时间)重新填充，这会将我带到同一网站中的不同页面.但是，所有 window.performance 值在网站初始加载后都不会改变(在网站中移动时，Chrome 的 devtool 网络窗口中的 DOMContentLoaded 和 Load 值也不会改变)。

问题:为什么 window.performance 中的值从未改变？是因为这是一个 SPA(单页应用程序)吗？我观察了 chrome devtool 的 DOMContentLoaded 和 Load 在不同网站(较旧)中单击时的值，每次我转到该网站中的新页面时，DOMContentLoaded 和 加载 时间更改为显示网站内每个页面的加载时间(通过单击该网站主菜单中的链接转到不同的页面)。

Answer 1

为什么 finished 不等于 domComplete - requestStart？

DOMContentLoaded 表示所有 DOM 内容已加载，但 javascript 和图像仍在加载。

加载 表示加载所有内容，包括javascript 和图像。如果您在触发此事件 之前开始延迟加载图像和 javascript，它将延迟此事件并减慢您的页面加载事件。 这会对您的 google lighthouse 分数产生负面影响。

chrome 开发工具中的

Finished 包括异步加载 Assets ，这可能会在触发 onload 事件后继续下载。一旦您的脚本之一开始通过 ajax 加载更多内容，完成时间就会增加。这个数字通常可以帮助您了解加载所有内容 需要多长时间，包括延迟加载的图像、脚本等。它可以而且应该在 load 事件之后加载，以改进您的 SEO 页面。

如何计算在网络浏览器中输入 url 和页面加载之间的时间？

搜索引擎关注的真正重要事件是 load 事件。所以你并不真正关心 finish 时间。您希望在触发此事件后将与您的应用程序的第一次交互不需要的所有内容移动为延迟加载。

此外，您正在寻找 navigationStart 而不是 requestStart。在用户按下回车键 (navigationStart) 和实际执行请求 (requestStart) 之间会有一些时间。

W3C 规范:

navigationStart

This attribute must return the time immediately after the user agent finishes prompting to unload the previous document. If there is no previous document, this attribute must return the time the current document is created.

MDN 引用

performance.timing.navigationStart + performance.now() will be approximately equal to Date.now()

触发 performance.now() onload 告诉您到达那里需要多长时间。 但是，IE9 不支持它，一些浏览器会舍入结果。使用 Date.now() - window.performance.timing.navigationStart 可提供更一致的结果并受 IE9 支持。

用于记录加载事件时间的 JS。

window.addEventListener('load', (event) => {
    console.log('All assets are loaded')
    console.log(Date.now() - window.performance.timing.navigationStart);
});

为什么 window.performance 值在初始加载后永远不会改变？

这与 SPA 页面有关。一旦加载了 DOM 和初始 Assets ，其他所有内容都将异步加载。 SPA 的路由在前端处理，不会触发 chrome 开发工具中的新页面加载。即使在手动重新加载页面时，您也必须禁用网络选项卡中的“保留日志”选项才能获得新的性能值。