猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

在JavaScript中计算页面加载时间

我正在尝试制作一个网页，当它开始加载时，使用间隔来启动计时器。


页面完全加载后，它将停止计时器，


但是即使有更长的时间，我仍然有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;

因此，它基本上会创建一个称为百分百的变量，该变量每10毫秒（.01秒）增加1。


然后，如果该数字达到1000（1整秒），则称为secondsplace的变量将增加1，因为它已运行了整整秒数。


然后，它警告秒位，小数点和百分之一百位作为总加载时间。


但是上面的数字错误问题仍然存在。为什么？


慕尼黑的夜晚无繁华
浏览 1842回答 3
3回答

明月笑刀无情

永远不要使用setInterval或setTimeout功能进行时间测量！它们不可靠，并且很可能在文档解析和显示期间延迟JS执行计划。相反，在页面开始加载时，使用该Date对象创建时间戳记，并计算页面完全加载时的时间差：<doctype html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var timerStart = Date.now();&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; &nbsp; &nbsp; <!-- do all the stuff you need to do -->&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <!-- put everything you need in here -->&nbsp; &nbsp; &nbsp; &nbsp; <script type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(document).ready(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log("Time until DOMready: ", Date.now()-timerStart);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(window).load(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log("Time until everything loaded: ", Date.now()-timerStart);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; </body></html>
0

皈依舞

为什么这么复杂？何时可以：var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;如果需要更多时间，请查看window.performance对象：console.log(window.performance);将向您显示计时对象：connectEnd&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Time when server connection is finished.connectStart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Time just before server connection begins.domComplete&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Time just before document readiness completes.domContentLoadedEventEnd&nbsp; &nbsp;Time after DOMContentLoaded event completes.domContentLoadedEventStart Time just before DOMContentLoaded starts.domInteractive&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Time just before readiness set to interactive.domLoading&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Time just before readiness set to loading.domainLookupEnd&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Time after domain name lookup.domainLookupStart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Time just before domain name lookup.fetchStart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Time when the resource starts being fetched.loadEventEnd&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Time when the load event is complete.loadEventStart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Time just before the load event is fired.navigationStart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Time after the previous document begins unload.redirectCount&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Number of redirects since the last non-redirect.redirectEnd&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Time after last redirect response ends.redirectStart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Time of fetch that initiated a redirect.requestStart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Time just before a server request.responseEnd&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Time after the end of a response or connection.responseStart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Time just before the start of a response.timing&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Reference to a performance timing object.navigation&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Reference to performance navigation object.performance&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Reference to performance object for a window.type&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Type of the last non-redirect navigation event.unloadEventEnd&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Time after the previous document is unloaded.unloadEventStart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Time just before the unload event is fired.
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript