我如何知道当前页面使用 Jquery 或 Javascript 加载了多长时间？答案

【问题标题】：How can I know how long the current page has been loaded using Jquery or Javascript?我如何知道当前页面使用 Jquery 或 Javascript 加载了多长时间？
【发布时间】：2009-11-19 13:17:30
【问题描述】：

我如何知道当前页面使用 Jquery 或 Javascript 加载了多长时间？什么功能？

【问题讨论】：

什么意思，已经加载了？用户在当前页面停留了多长时间？
社区维基有什么用？
针对主观主题，不针对问题/问题。

标签： jquery load timer

【解决方案1】：

页面加载时获取当前时间戳：

var startTime = new Date().valueOf();

那么页面已经加载为当前时间戳减去这个值：

var loadedSeconds = (new Date().valueOf() - startTime) / 1000;

时间以毫秒为单位，因此除以 1000 得到秒数。

示例代码：-

<script>
//Getting Date When Page Started Loading
var start = new Date();

//Window Load Function that is called after page is completely loaded
$(window).load(function() {

//Substracting Started Time From Time When Page Completely Loaded
   $('body').html(new Date() - start); 
});
</script>

【讨论】：

【解决方案2】：

Web Animations API 提供document.timeline，它有一个带有页面年龄的currentTime 属性（从技术上讲，它在您离开上一页时开始计数）。

console.log(`This page has existed for ${document.timeline.currentTime} milliseconds.`);

请注意，此功能是相当新的。 Chrome 仅在 2020 年 7 月才添加它，因此如果您需要支持旧版浏览器，那么最好的选择是使用此页面上提供的其他解决方案之一。

【讨论】：

+1，如果您试图确定现有页面已打开多长时间（例如通过控制台），这是唯一可行的解决方案。

【解决方案3】：

您可以在<head> 的开头添加一个var start = new Date();，然后在<body> 的末尾添加一个new Date().getTime() - start.getTime()

【讨论】：

【解决方案4】：

这些解决方案告诉您加载页面需要多长时间。

要知道页面运行了多长时间，您可以运行一个查找时间的函数（使用其他人提到的方法）显示时间，然后调用自身（可能会稍作停顿）。

这将是一个相当密集的过程，我不建议在访问者众多或需要运行其他 JS 的网站上执行此操作。

编辑 - 实际上，如果您将其设置为一个按钮，您可以单击该按钮来调用该函数并且不让它调用自身，这会阻止任何疯狂的开销。

【讨论】：