我想计算页面加载时间；这意味着从第二个 0（加载了一个小 jquery 代码片段）到第二个 x，当整个页面被加载时。
我想知道是否有人有过它的经验，以及如何正确实施它的想法。
请问我不需要扩展，我已经有firebug，我需要一个js解决方案
谢谢 ：）
问问题
22988 次
6 回答
22
正如其他人所提到的，这不会非常准确。但这应该是合理的。
在您的<head>, ie 中，尽可能早地：
<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>
关键是这种行为，来自 jQuery 文档：
当绑定到窗口元素时，当用户代理完成加载文档中的所有内容时触发该事件，包括窗口、框架、对象和图像。
于 2009-07-31T09:21:34.343 回答
2
由于脚本在解析后立即执行，因此我建议您将一个脚本标记放在标题中，然后在您加载 jQuery 后挂钩页面加载事件的脚本：
<html>
<head>
<script>
// Capture start time
</script>
...
<script src="jquery.js" />
<script>
$(window).load(function() {
// Capture end time
});
</script>
...
这样，您应该能够尽可能多地捕获页面加载时间。
于 2009-07-31T09:36:50.100 回答
0
使用浏览器插件会更好吗？使用 JavaScript 计算将有必要低估页面加载时间，因为它不包括加载 jQuery 代码段的时间，也不包括浏览器发送请求和网络服务器响应之间的时间？
Firefox有一个加载时间分析器插件。
于 2009-07-31T09:05:50.367 回答
0
如果您这样做是为了优化，那么我建议您使用Yslow。它是一个 Firebug-Firefox 扩展。它可以显示页面加载时间和许多其他有用的信息。
于 2009-07-31T09:06:25.340 回答
0
值得注意的：
例如，以下脚本显示了一个天真的尝试来测量完全加载页面所需的时间：
<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>
于 2016-05-26T14:04:40.667 回答