使用 Javascript 的 window.performance.timing 计算页面加载时间
Calculate Page Load Times using Javascript's window.performance.timing
我可以使用以下代码计算 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 变量的值相同。
问题:
- 为什么 Finish 的值不是同一时间？什么是 Finish 以及如何使用 javascript 的 window.performance.timing 对象计算它？
- 如何计算在网络浏览器中输入 url（并按下回车键）与最终加载页面上所有内容之间的时间？
以下文档很好地描述了每个时序变量测量的内容
mozilla-developer timestamp variables，但是 chrome devtools 中的 Finish 值混淆了水。
图：从 Chrome 的 Devtool (F12) 网络选项卡中提取性能信息
编辑：
谢谢@wOxxOm。我注意到 Finish 时间在我与网站交互时不断增加（转到网站中的不同页面），而 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 功能。
我还有一个问题
问题二：
我最初认为 window.performance 对象中的值会在我单击 link（在网站上）时用新值（时间）重新填充，这需要我到同一网站内的不同页面。但是，所有 window.performance 值在网站初始加载后都不会改变（Chrome 的 devtool 网络 window 中的 DOMContentLoaded 和 Load 值在网站中移动时也不会改变）。
问题：为什么 window.performance 中的值从未改变？是因为这是一个 SPA（单页应用程序）吗？我观察到 chrome devtool 的 DOMContentLoaded 和 Load 在不同的网站（较旧的）中点击时的值，每次我去一个新的该网站内的页面，DOMContentLoaded 和 Load 时间更改为显示网站内每个页面的加载时间（通过单击 link 在该网站的主菜单中）。
为什么完成不等于 domComplete - requestStart？
DOMContentLoaded 表示所有 DOM 内容已加载，但 javascript 和图像仍在加载.
加载 表示加载所有 内容，包括 javascript 和图像 。如果您开始延迟加载图像并且 javascript 在 此事件被触发之前，它将延迟此事件并减慢您的页面加载事件。 这会对您的 google 灯塔分数产生负面影响。
Finished in chrome 开发工具包括异步加载资产，这可能会在 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 和初始资产，其他所有内容都将异步加载。 SPA 的路由在前端处理，不会在 chrome 开发工具中触发新页面加载。即使手动重新加载页面，您也必须禁用网络选项卡中的 'preserve log' 选项才能获得新的性能值。
我可以使用以下代码计算 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 变量的值相同。
问题:
- 为什么 Finish 的值不是同一时间？什么是 Finish 以及如何使用 javascript 的 window.performance.timing 对象计算它？
- 如何计算在网络浏览器中输入 url（并按下回车键）与最终加载页面上所有内容之间的时间？
以下文档很好地描述了每个时序变量测量的内容 mozilla-developer timestamp variables，但是 chrome devtools 中的 Finish 值混淆了水。
图：从 Chrome 的 Devtool (F12) 网络选项卡中提取性能信息
编辑：
谢谢@wOxxOm。我注意到 Finish 时间在我与网站交互时不断增加（转到网站中的不同页面），而 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 功能。
我还有一个问题
问题二： 我最初认为 window.performance 对象中的值会在我单击 link（在网站上）时用新值（时间）重新填充，这需要我到同一网站内的不同页面。但是，所有 window.performance 值在网站初始加载后都不会改变（Chrome 的 devtool 网络 window 中的 DOMContentLoaded 和 Load 值在网站中移动时也不会改变）。
问题：为什么 window.performance 中的值从未改变？是因为这是一个 SPA（单页应用程序）吗？我观察到 chrome devtool 的 DOMContentLoaded 和 Load 在不同的网站（较旧的）中点击时的值，每次我去一个新的该网站内的页面，DOMContentLoaded 和 Load 时间更改为显示网站内每个页面的加载时间（通过单击 link 在该网站的主菜单中）。
为什么完成不等于 domComplete - requestStart？
DOMContentLoaded 表示所有 DOM 内容已加载，但 javascript 和图像仍在加载.
加载 表示加载所有 内容，包括 javascript 和图像 。如果您开始延迟加载图像并且 javascript 在 此事件被触发之前，它将延迟此事件并减慢您的页面加载事件。 这会对您的 google 灯塔分数产生负面影响。
Finished in chrome 开发工具包括异步加载资产，这可能会在 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 和初始资产，其他所有内容都将异步加载。 SPA 的路由在前端处理，不会在 chrome 开发工具中触发新页面加载。即使手动重新加载页面，您也必须禁用网络选项卡中的 'preserve log' 选项才能获得新的性能值。