javascript - JavaScript 的页面加载时间

Question

我正在寻找一种正确的方法来测试页面完全加载其所有资源所需的时间。到目前为止我所做的是添加：

window.startTime = (new Date).getTime(); // after the title in my page

和

window.onload = function () {
    console.log((new Date).getTime() - window.startTime);
}
window.addEventListener('load',function () {
    console.log((new Date).getTime() - window.startTime);   
},false);

在页脚中向下。这是衡量的好方法吗？加载时间和感知加载时间之间是否存在差异？从我所看到的事件触发后，所有资源都已加载，包括图像。这两个事件有什么区别吗？我也可以使用 PageSpeed 来测试这个吗？（我知道我可以在 chrome 开发工具中做到这一点，但我也想要一个脚本，以便我可以跟踪数据。）

score 43 · Accepted Answer

这几乎是旧版浏览器中测量时间的唯一方法。但是为了救援，大多数浏览器确实实现了window.performance提供非常非常准确的获取时间方式的对象。

典型window.performance.timing输出：

connectEnd 1351036536696
connectStart 1351036536696
domComplete 1351036538277
domContentLoadedEventEnd 1351036538146
domContentLoadedEventStart 1351036538119 domInteractive 1351036538042 domLoading
1351036537552 domainLookupEnd
1351036536694 domainLookupStart
1351036536694
fetchStart
1351036536696 loadEventEnd
1351036538295
loadEventStart 1351036538277
navigationStart 1351036536696

..这甚至不是完整的列表。

score 32 · Accepted Answer

如果您只是在本地机器上调试页面加载时间，Firefox 的 Firebug、Chrome 开发者工具和 IE 的 F12 开发者工具会公开最新的页面加载时间。

为了在现实世界中获取您网站访问者的页面加载时间，您需要使用真实用户监控（又名RUM）页面加载指标。我建议查看NavigationTiming 规范。该规范在 IE9+、FF7+ 和 Chrome6+ 中得到支持，通过浏览器的 DOM 公开页面加载时间（例如 DNS、TCP 连接、请求、响应和 DOM 时间）。这可以让您在现代浏览器中为每个访问您网站的访问者获得毫秒级的页面加载时间。

它在时间线上公开了所有这些指标：在此处输入图像描述

现在这些指标已公开，您可以通过多种方式使用它们。

对于 DIY 解决方案，Boomerang是一个第三方库，它使用现代浏览器中的 NavigationTiming 将这些数据 ping 回您的数据中心。对于较旧的浏览器，它有一些很酷的技巧可以监控站点内的页面到页面导航，以确定页面加载需要多长时间。

如果您对找出所有 Boomerang 内容不感兴趣，还有其他几个使用 NavigationTiming（和类似）数据来报告页面加载性能数据的服务提供商，例如web.dev、Google Analytics、New Relic、Pingdom，速度曲线和速度等级。

score 3 · Accepted Answer

我考虑使用 Firefox 的 Firebug：

在此处输入图像描述

..或 Chrome 的开发者工具（按 F12）在此处输入图像描述

也可以看看：

score 2 · Accepted Answer

在浏览器控制台上输入：

var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
loadTime;

score 0 · Accepted Answer

我一般在 Firebug 中结合使用 YSlow、PageSpeed 和 Net 选项卡来测量页面加载时间并诊断潜在问题。Firebug 有很多信息，如果您还没有检查过，这些信息可能会很有用。

score 0 · Accepted Answer

JavaScript 方法很大程度上依赖于 Web 浏览器。为什么不试试 FireBug for firefox、DevTools for Chrome 和 Firebug lite for IE。

如果您仍想编写一些代码，请使用 window.performance 对象。

您很可能会为每个浏览器获得不同的加载时间。

javascript - JavaScript 的页面加载时间

6 回答 6

Related

Reference