Fatal编程技术网
  • javascript/
  • Javascript 计算估计的页面加载时间

Javascript 计算估计的页面加载时间

javascript jquery performance

Javascript 计算估计的页面加载时间,javascript,jquery,performance,Javascript,Jquery,Performance,是否可以使用jQuery/Javascript计算页面的估计加载时间 我试过下面的方法，我在网上的某个地方找到了，但是每次重新加载的时间都会增加200次，当它达到6000次时，它会重置回0 var perfData = window.performance.timing, EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart), time = parseInt((EstimatedTime/1000)

是否可以使用jQuery/Javascript计算页面的估计加载时间

我试过下面的方法，我在网上的某个地方找到了，但是每次重新加载的时间都会增加200次，当它达到6000次时，它会重置回0

var perfData = window.performance.timing,
    EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
    time = parseInt((EstimatedTime/1000)%60)*100;

if (time >= 700) {
    $(window).load(function() {
        // Do something
    });
} else {
    // Do something else
}
如果估计的页面加载时间为700ms或更长，我希望它使用预加载程序。

页面加载的结束是什么<代码>窗口。联机加载

var first= new Date();

$(window).load(function() {
   $('body').html(new Date() - first);
});
如果使用得当，这种方法会起作用。它与浏览器兼容

现在，你描述的行为让我相信你只是没有很好地使用它

“每次重新加载时的时间增量为200”仅表示
perfData.loadEventEnd
等于零。那么你的计算就毫无意义了。您只有
perfData.navigationStart
，它是Unix整数中的时间

现在，我将完全删除你对
时间的数学计算。
EstimatedTime
已为毫秒

然后，在页面完全加载后，脚本应读取
计时属性。否则，
perfData.loadEventEnd
肯定为零

因此，在
load
事件处理程序中，使用
setTimeout（）
确保脚本将在
load
事件结束后执行


var loadTime = function(){
  setTimeout(function(){
    var perfData = window.performance.timing;
    var EstimatedTime = (perfData.loadEventEnd - perfData.navigationStart);

    if(EstimatedTime>700){
      // Something for load time more than 700 ms
    }else{
      // Something for faster load time
    }
  },10);  // Executes 10 ms after load has ended
};


在标记中：


<body onload="loadTime();">






试着在游戏中玩它


您的问题在另一个页面中重现。
加载一个100kb的图像，测量加载所需的时间，您可以得到整个页面的加载时间（平均）
toLoad/100kb*timeitbook
您有什么理由想通过编程方式这样做吗？我问你，因为你可以在大多数浏览器的控制台中看到这些信息。@Rorymcrossan只是因为不同用户的页面速度会有所不同，所以如果有人的下载速度非常快，他们会在一瞬间看到预加载程序，这看起来很奇怪，而且会被忽略versa@JonasW. 内容将是动态的，如果我使用上一次加载所花费的时间，它可能会与当前加载时间有很大差异。谢谢，但这不是我的意思，我想估计页面在完成加载之前加载所需的时间。因此，如果它估计页面加载时间为2.3秒，我希望它做些什么，但如果它估计为400毫秒，那么就做些其他事情，但是，如果它在页面加载之后运行，那么它只会返回一个正确的值，这很好，但是我不知道如何实现它来获得页面加载完成之前的时间，以确定是否需要预加载程序。在这种情况下，我仍然会投票给你，因为这有助于我更好地理解性能API。我认为你不能在。。。每一页。但是如果你在你的登录页面上做一次，你将能够扣除所有其他页面的速度。我会将该度量放在其他页面中，在
load
完成之前数据将可用。其他一些问题：1）第一次加载时该度量将有效。第二次加载可能会使用缓存来加快加载时间，因此该值应该更低。2） 我会在一个特定的图像上测量加载时间，而不是
主体
。。。在标题中说出你的徽标。这样你就可以在你的任何一页上发表文章了。3） 如果你的标志太小。。。使用隐藏的大图像！！4） 最后，如果该值已经在localStorage中，请不要更新它。。。保留第一个测量值。；）您可以使用localStorage来了解特定页面是否也已加载。。。因此，即使加载时间很长，您也可能决定不显示预加载程序（我认为是旋转gif）。或者在这种情况下再测量一次。。。但同样，只需保留初始测量值！嗯，好的，谢谢，我将对localStorage进行更深入的研究，看看是否可以实现您提到的东西