页面加载时间使用JavaScript(Page load time with JavaScript)

我要找来测试它需要一个页面完全加载所有资源的时候以适当的方式。什么我迄今所做的是增加：

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

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

Answer 2:

如果你只是在本地机器上调试的页面加载时间 ，Firefox的萤火虫，Chrome开发者工具，IE的F12开发工具暴露了最新的网页加载时间安排。

为了吸引访客的页面加载时间到您的网站在现实世界中 ，你需要使用真实用户监控（又名RUM）页面加载指标。我会建议寻找到NavigationTiming规范。这个规范，支持在IE9 +，FF7 +和Chrome6 +，暴露页面加载定时（例如DNS，TCP连接，请求，响应和DOM定时）通过浏览器的DOM。这可以让你得到毫秒精确的页面加载计时为每一个来到你的网站在新版浏览器的访客。

它暴露了所有的时间轴上这些指标的：

现在，这些指标都暴露出来，有几种方法，你可以使用它们。

对于DIY解决方案，回旋镖是使用NavigationTiming在现代浏览器ping此数据返回到您的数据中心第三方库。对于旧的浏览器，它有一个监控网站的内页，以用户浏览网页，以确定负载页面多久一些很酷的技巧。

如果你没有兴趣搞清楚所有的回旋镖东西出来，也有使用NavigationTiming（以及类似）的数据报告页面加载性能数据，如其他几个服务提供商web.dev ，谷歌Analytics（分析）， New Relic的， Pingdom的， Speedcurve和Speedrank 。

Answer 3:

我考虑使用Firefox的Firebug的：

..或Chrome浏览器的开发者工具（按F12）

也可以看看：

https://getfirebug.com/network
https://developers.google.com/chrome-developer-tools/docs/network

Answer 4:

您的浏览器控制台上键入以下内容：

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

Answer 5:

JavaScript的方法是大量依赖于Web浏览器。你为什么不尝试Firefox的Firebug，Chrome和Firebug的精简版的IE DevTools。

如果你一直希望写一些代码，然后使用window.performance对象。

你最有可能会得到不同的加载时间，每个浏览器。

Answer 6:

我generalled使用YSlow的，和的PageSpeed Net标签的组合在Firebug来衡量网页加载时间并发现潜在问题。萤火虫有很多的信息，如果您还没有已经检查了这一点，可能证明是有用的。

文章来源: Page load time with JavaScript