在JavaScript中计算页面加载时间
我正在尝试创build一个网页，当它开始加载时，使用Interval来启动计时器。
当页面完全加载时，它停止计时器，
但99％的时间我得到0.00或0.01的时间测量，即使需要更长的时间。
有时候，它会说某些事情在某些时候更像.28或3.10。
这里是代码，如果有帮助：
var hundredthstimer = 0; var secondplace = 0; function addinc(){ hundredthstimer += 1; if (inctimer == 100){ hundredthstimer = 0; secondplace += 1; } } var clockint = setInterval(addinc, 10); function init(){ var bconv1 = document.getElementById("bconverter1"); var bconv2 = document.getElementById("bconverter2"); $(bconv2).hide(); clearInterval(clockint); if (inctimer.len !== 2){ inctimer = "0" + inctimer; } alert(secondplace + "." + inctimer); } onload = init; 所以它基本上创build一个称为百分之一百的variables，每10毫秒（.01秒）增加1。
然后，如果这个数字达到1000（1秒），一个叫做secondsplace的variables就会上升1，因为这个数字已经跑完了多less秒。
然后，它提醒几秒钟，一个小数点和百分之一的总加载时间。
但上面的数字不正确的问题仍然存在。 为什么？
不要使用setInterval或setTimeout进行时间测量！ 它们是不可靠的，在文档parsing和显示期间JS执行调度很可能是延迟的。
而是使用Date对象在页面开始加载时创build一个时间戳，并计算页面完全加载时的差异：
<doctype html> <html> <head> <script type="text/javascript"> var timerStart = Date.now(); </script> <!-- do all the stuff you need to do --> </head> <body> <!-- put everything you need in here --> <script type="text/javascript"> $(document).ready(function() { console.log("Time until DOMready: ", Date.now()-timerStart); }); $(window).load(function() { console.log("Time until everything loaded: ", Date.now()-timerStart); }); </script> </body> </html>
为什么这么复杂？ 当你可以做：
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
如果您需要更多次检查window.performance对象：
console.log(window.performance);
将显示时间对象：
connectEnd Time when server connection is finished. connectStart Time just before server connection begins. domComplete Time just before document readiness completes. domContentLoadedEventEnd Time after DOMContentLoaded event completes. domContentLoadedEventStart Time just before DOMContentLoaded starts. domInteractive Time just before readiness set to interactive. domLoading Time just before readiness set to loading. domainLookupEnd Time after domain name lookup. domainLookupStart Time just before domain name lookup. fetchStart Time when the resource starts being fetched. loadEventEnd Time when the load event is complete. loadEventStart Time just before the load event is fired. navigationStart Time after the previous document begins unload. redirectCount Number of redirects since the last non-redirect. redirectEnd Time after last redirect response ends. redirectStart Time of fetch that initiated a redirect. requestStart Time just before a server request. responseEnd Time after the end of a response or connection. responseStart Time just before the start of a response. timing Reference to a performance timing object. navigation Reference to performance navigation object. performance Reference to performance object for a window. type Type of the last non-redirect navigation event. unloadEventEnd Time after the previous document is unloaded. unloadEventStart Time just before the unload event is fired.
浏览器支持
更多信息
var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
使用时可以正常工作：
window.onload = function () { var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; console.log('Page load time is '+ loadTime); }
