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 dev工具中完成它，但我也想要一个脚本，以便我可以跟踪数据。）

Answer 1

在传统浏览器中，它几乎只是方式来衡量时间。但是为了拯救，大多数浏览器都实现了window.performance对象，它提供了非常非常准确的获取时间的方法。

典型的window.performance.timing输出：

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

..甚至不是完整的清单。

Answer 2

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

要在现实世界中获取网站访问者的页面加载时间，您需要使用真实用户监控（又名 RUM ）页面加载指标。我建议调查一下NavigationTiming spec。 IE9 +，FF7 +和Chrome6 +中的此规范supported通过浏览器的DOM公开页面加载时序（例如DNS，TCP连接，请求，响应和DOM时序）。这样，您就可以为在现代浏览器中访问您网站的每位访问者提供毫秒级精确的页面加载时间。

它在时间轴上公开了所有这些指标： enter image description here

现在公开了这些指标，有几种方法可以使用它们。

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

如果您对解决所有Boomerang问题不感兴趣，还有其他一些服务提供商使用NavigationTiming（和类似）数据来报告页面加载性能数据，例如web.dev，{{3 }}，Google Analytics，New Relic，Pingdom和Speedcurve。

Answer 3

我考虑使用Firefox的Firebug：

enter image description here

..或Chrome的开发者工具（按F12） enter image description here

另见：

Answer 4

在浏览器控制台上输入：

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

Answer 5

JavaScript方法很大程度上依赖于Web浏览器。你为什么不尝试使用FireBug for Firefox，DevTools for Chrome和Firebug lite for IE。

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

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

Answer 6

我推测使用了Firebug中的YSlow，PageSpeed和Net选项卡的组合来测量页面加载时间并诊断潜在问题。如果你还没有检查出来，Firebug有很多可能有用的信息。

使用JavaScript加载页面时间

6 个答案: