JavaScript的页面加载时间

27

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

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 开发工具中进行,但我还想要一个脚本,以便我可以跟踪数据。)

6个回答

45

这几乎是在旧版浏览器中测量时间的唯一方法。但是,拯救之道是,大多数浏览器确实实现了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

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


太遗憾了,它们在移动设备上不可用;除此之外非常棒 http://caniuse.com/#feat=nav-timing - andrei

34

如果您只是在本地机器上调试页面加载时间,Firefox的Firebug、Chrome开发者工具和IE的F12开发者工具都能够显示最新的页面加载时间。

如果想要获取您网站访问者的页面加载时间,您需要使用实时用户监控(也称为RUM)页面加载指标。我建议您看看NavigationTiming规范。这个规范 supported 在IE9+、FF7+和Chrome6+中,通过浏览器的DOM公开了页面加载时间(例如DNS、TCP连接、请求、响应和DOM时间)。这可以让您在现代浏览器中为每位访问者获得毫秒级准确的页面加载时间。

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

既然这些指标已经公开,有多种方法可以使用它们。

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

如果您不想弄清楚所有Boomerang的内容,还有其他几个服务提供商使用NavigationTiming(和类似的)数据来报告页面加载性能数据,例如web.devGoogle AnalyticsNew RelicPingdomSpeedcurveSpeedrank


2
+1 这张图片让事情更清晰了。仅凭这一点,这个答案就值得更多的赞誉,更不用说那个精彩的解释了。 - JCOC611

3

2
在您的浏览器控制台中输入以下内容:
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
loadTime;

谢谢 - 但为什么不在控制台中使用单行代码 window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart 呢?(顺便提一下,在大多数浏览器中,**Ctrl+Shift+K** 可以打开控制台。) - ashleedawg

0

JavaScript的方法很大程度上依赖于Web浏览器。为什么不尝试使用Firefox的FireBug,Chrome的DevTools和IE的Firebug Lite呢?

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

每个浏览器的加载时间可能会有所不同。


0

我通常使用YSlow、PageSpeed和Firebug中的Net选项卡来测量页面加载时间并诊断潜在问题。如果您还没有查看过Firebug,它有很多有用的信息。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接