2009-07-31 140 views
10

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

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

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

谢谢:)

回答

21

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

在你<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

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

0

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

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

+0

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

0

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

-2

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

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

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

+0

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

+0

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

1

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

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

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

0

阅读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>