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

Question

我可以使用以下代码来计算硒中的页面加载时间：

代码：硒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上面的代码对应于值加载在下面的图片。图片中的负载似乎总是与DOMContentLoaded变量的值相同。

问题：

1. 为什么“ 完成”值不同？什么是Finish？如何使用javascript的window.performance.timing对象计算此值？
2. 您如何计算从在Web浏览器中键入URL（并按Enter）到页面上所有内容最终加载之间的时间？

以下文档非常擅长描述每个计时变量正在测量 Mozilla-Developer时间戳变量的内容，但是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和Load时间都会更改，以显示网站中每个页面的加载时间（通过点击该网站主菜单中的链接来访问不同的页面）。

Answer 1

为什么完成不等于domComplete - requestStart？

DOMContentLoaded意味着所有 DOM 内容都已加载，但javascript 和图像仍在加载。

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

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

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

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

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

W3C 规范：

导航开始

此属性必须在用户代理完成提示卸载前一个文档后立即返回时间。如果没有以前的文档，则此属性必须返回创建当前文档的时间。

MDN 报价

performance.timing.navigationStart + performance.now() 将大约等于 Date.now()

Firingperformance.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 和初始资产后，其他所有内容都会异步加载。SPA 的路由在前端处理，不会在 Chrome 开发工具中触发新页面加载。即使手动重新加载页面，您也必须禁用网络选项卡中的“保留日志”选项以获得新的性能值。