使用 Jquery 的页面加载时间答案

【问题标题】：page load time with Jquery使用 Jquery 的页面加载时间
【发布时间】：2010-11-15 17:36:59
【问题描述】：

我想计算页面加载时间；这意味着从第二个 0（加载了一个小 jquery sn-p）到第二个 x，当整个页面被加载时。

我想知道是否有人有过它的经验，以及如何正确实施它的想法。

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

谢谢:)

【问题讨论】：

标签： jquery optimization time load

【解决方案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：

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

【讨论】：

您将在“head”中添加第一行 javascript 时添加 mike houston 提示，这将提高准确性
哦，很好，我刚刚意识到我假设 jQuery 是先加载的，而实际上它应该加载在两个代码 sn-ps 之间。

【解决方案2】：

由于脚本一被解析就执行，我建议你在标题中放置一个脚本标签，然后在你加载 jQuery 后，使用脚本来挂钩页面加载事件：

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

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

【讨论】：

【解决方案3】：

使用浏览器插件会更好吗？用 JavaScript 计算必然会低估页面加载时间，因为它不包括加载 jQuery sn-p 的时间，也不包括浏览器发送请求和网络服务器响应之间的时间？

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

【讨论】：

不，我希望它适用于所有浏览器；这是因为我将收集所有负载时间并稍后与他们进行分析

【解决方案4】：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

你不能用 jQuery 真正做到这一点，因为当页面加载时$(document).ready(); 会触发。

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

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

【讨论】：

很密集，找简单的东西，不过会浏览一下
它根本不是很密集，但我已经使用了多年。 theautomatedtester.co.uk/selenium_training.htm 有一些 Selenium 教程
我只需要几行代码，如果你的目标很小，一个完整的框架并没有真正的生产力；用 Jquery 写 3 行 Javascript 和 1 行哪个更好？
好吧，我会使用 Selenium，因为您不必更改页面的时间，并且您可以将结果存储在数据库中，这样您就可以密切关注它。是的，您可以在页面上执行此操作，但需要您的页面代码在不需要时处理此操作。