使用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 dev工具中完成它,但我也想要一个脚本,以便我可以跟踪数据.)

Answer 1

它几乎是传统浏览器测量时间的唯一方法.但是为了救援,大多数浏览器都实现了这个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

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

Answer 2

如果您只是在本地计算机上调试页面加载时间,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,Speedcurve和Speedrank.