使用Jquery加载页面的时间
https://stackoverflow.com/questions/1211414
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我想计算页面加载时间;这意味着当加载整个页面时，从第二个0（加载一个小jquery片段）到第二个x。
我想知道是否有任何人有过这方面的经验，而且如何正确实施它的想法也会被贬低。
请我不需要扩展，我已经有了firebug，我需要一个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>
关键是这种行为，来自jQuery文档：
当绑定到窗口元素时， 用户代理时触发事件 完成加载a内的所有内容 文件，包括窗口，框架， 对象和图像。
其他提示
由于脚本在解析后立即执行，我建议您在头文件中放置一个脚本标记，然后在加载jQuery后挂起页面加载事件的脚本：
<html>
<head>
<script>
// Capture start time
</script>
...
<script src="jquery.js" />
<script>
$(window).load(function() {
// Capture end time
});
</script>
...
这样你应该能够捕获尽可能多的页面加载时间。
你最好使用浏览器插件吗？使用JavaScript进行计算必然会低估页面加载时间，因为它不会包含加载jQuery代码段的时间，也不包括发送请求的浏览器和响应的Web服务器之间的时间？
Firefox上有一个加载时间分析器插件。
如果你这样做是为了优化，那么我建议你使用 YSlow的。它是Firebug-Firefox扩展。它可以显示页面加载时间和许多其他有用的信息。
阅读 W3C导航时间推荐
值得注意的：
例如，以下脚本显示了一个天真的尝试来衡量 完全加载页面所需的时间：
<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>
