Question

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

我想知道是否有任何人有过这方面的经验，而且如何正确实施它的想法也会被贬低。

请我不需要扩展，我已经有了firebug，我需要一个js解决方案

谢谢：）

Answer 1

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

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

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

Answer 2

由于脚本在解析后立即执行，我建议您在头文件中放置一个脚本标记，然后在加载jQuery后挂起页面加载事件的脚本：

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

这样你应该能够捕获尽可能多的页面加载时间。

Answer 3

你最好使用浏览器插件吗？使用JavaScript进行计算必然会低估页面加载时间，因为它不会包含加载jQuery代码段的时间，也不包括发送请求的浏览器和响应的Web服务器之间的时间？

Firefox有一个Load Time Analyzer插件。

Answer 4

如果您出于优化目的而这样做，那么我建议您使用Yslow。它是Firebug-Firefox扩展。它可以显示页面加载时间和许多其他有用的信息。

Answer 5

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

脚本计算在加载页面之后所花费的时间   执行头部的第一个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>

Answer 6

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

您可以使用Firfox的YSlow Firebug插件执行此操作。如果您希望这适用于所有浏览器，则需要添加服务器端代码以显示将第一个元素写入底部元素所花费的时间。

如果这不是您想要的，您可以使用Selenium之类的工具并编写测试以捕获从open到waitForPageToLoad结束的时间。 Selenium适用于所有浏览器

使用Jquery加载页面的时间

6 个答案: