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 开发工具中完成此操作，但我还需要一个脚本，以便我可以跟踪数据。)

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

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