页面加载时间与Jquery

问题描述：

我想计算页面加载时间;这意味着从第二个0（加载了一个小的jquery代码片段）到第二个x，当整个页面加载时。页面加载时间与Jquery

我想知道是否有人有这方面的经验，以及如何正确实施它的想法将是apperciated。

请我不需要延期，我已经有萤火虫，我需要一个js的解决方案

谢谢:)

答

正如其他人所说的，这不会非常准确。但这应该合理工作。

在你<head>，即尽早：

<script> 
    var startTime = (new Date()).getTime(); 
</script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
    $(window).load(function() { 
     var endTime = (new Date()).getTime(); 
     var millisecondsLoading = endTime - startTime; 
     // Put millisecondsLoading in a hidden form field 
     // or Ajax it back to the server or whatever. 
    }); 
</script>

最关键的是这种行为，from the jQuery docs：

当绑定到窗口元素，在事件触发，当用户代理完成加载文档内的所有内容，包括窗口，框架，对象和图像。

答

可能会为您更好使用一个浏览器插件？使用JavaScript进行计算有必要低估页面加载时间，因为它不包括加载jQuery代码段的时间，并且不包括发送请求的浏览器和Web服务器响应之间的时间？

有一个用于Firefox的Load Time Analyzer插件。

不，我希望每一个浏览器;这是因为我会收集所有的加载时间，并与他们以后分析他们以后 – 2009-07-31 09:07:54

答

如果你是为了优化目的这么做，那么我建议你使用Yslow。它是一个Firebug-Firefox扩展。它可以显示你的页面加载时间和很多其他有用的信息。

答

由于$(document).ready();在页面加载完成时触发，因此您无法真正使用jQuery执行此操作。

您可以使用Firfox的YSlow Firebug插件。如果您希望在所有浏览器上都能使用此功能，则需要添加serverside代码以显示将第一个元素写入底层元素时需要多长时间。

如果这不是你想要的，你可以使用一个工具，如Selenium，并写一个测试，以捕获从open到waitForPageToLoad结束的时间。 Selenium可以在所有浏览器上运行

非常密集，寻找简单和简单的东西，将浏览它虽然 – 2009-07-31 09:15:55

它不是真的密集，但我一直在使用它多年。在http://www.theautomatedtester.co.uk/selenium_training.htm – AutomatedTester 2009-07-31 09:24:09

答

由于脚本，尽快为他们被解析执行，我建议你把一个脚本标签只是头内，那么脚本挂钩的页面加载事件已加载的jQuery后：

<html> 
<head> 
    <script> 
     // Capture start time 
    </script> 
    ... 
    <script src="jquery.js" /> 
    <script> 
     $(window).load(function() { 
     // Capture end time 
     }); 
    </script> 
...

这样，您应该能够尽可能多地捕捉网页加载时间。

答

阅读W3C recommendation for Navigation Timing

亮点：

例如，下面的脚本显示了简单的尝试测量时间才能完全加载一个页面：

<html> 
<head> 
<script type="text/javascript"> 

var start = new Date().getTime(); 
function onLoad() { 
    var now = new Date().getTime(); 
    var latency = now - start; 
    alert("page loading time: " + latency); 
} 

</script> 
</head> 
<body onload="onLoad()"> 
<!- Main page body goes from here. --> 
</body> 
</html>

该脚本计算加载页面所需的时间a在执行头部JavaScript的第一个位时，没有给出有关从服务器获取页面所需时间的任何信息。

为了解决用户体验完整信息的需求，本文介绍了PerformanceTiming接口。该接口允许JavaScript机制在应用程序内提供完整的客户端延迟测量。使用建议的接口，可以修改前面的示例以测量用户感知的加载时间。

以下脚本计算自从最近导航以来需要多少次加载页面。

<html> 
<head> 
<script type="text/javascript"> 
function onLoad() { 
    var now = new Date().getTime(); 
    var page_load_time = now - performance.timing.navigationStart; 
    alert("User-perceived page loading time: " + page_load_time); 
} 

</script> 
</head> 
<body onload="onLoad()"> 
<!- Main page body goes from here. --> 
</body> 
</html>

页面加载时间与Jquery

相关推荐