使用JavaScript加载页面时间 [英] Page load time with JavaScript

问题描述

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

I am looking for a proper way to test the time it takes a page to fully load all its resources. What I've done so far is add:

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

Way down in the footer. Is this a good way to measure? Could there be differences between load time and perceived load time? From what I'm seeing the events trigger after all the resources have loaded including images. Are there any differences between the two events? Also can I use PageSpeed to test this? (I know I can do it in chrome dev tools, but I also want a script so that I can keep track of data.)

推荐答案

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

It is pretty much the only way in legacy browsers to measure times. But for the rescue, most browsers do implement the window.performance object which offers a very, very accurate way of getting times.

一个典型的 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 < br>
navigationStart 1351036536696

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

..甚至不是完整列表。

..which is not even the full list.

这篇关于使用JavaScript加载页面时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！