Question

我需要获得网页的加载时间，但是有一个问题。我已经尝试过像AppTelemetry for Firefox这样漂亮的小浏览器插件。但是单击按钮，我的页面会重定向到另一个页面上的脚本，运行该脚本，然后重定向回原始页面并加载页面。我想从头到尾计算整个过程。

我的理解是客户端无法写入主机系统上的日志文件。使用JS显示系统时间的警报并不起作用，因为它会暂停，直到您单击“确定”为止。使用PHP脚本记录服务器日志文件的时间可用于重定向脚本的计时执行，但这将排除页面加载时间。有没有其他方法可以衡量总加载时间，包括重定向和脚本？

Answer 1

一个非常简单和基本的解决方案可能是：

窗口加载检查localstorage中的loadTime变量（无cookie）
如果没有设置当前时间并重新加载页面
如果完成加载计算加载时间并从localstorage中删除变量。

这不是最好的，但可以给你一个原创的想法。

最好的方法是查看控制台或编写/使用插件。

window.onload=function(e) {
  var sample = localStorage.getItem("loadTime");
  if (sample == null) {
    localStorage.setItem("loadTime", new Date().getTime());
    window.location.reload(true);
  } else {
    var loadingTime = new Date().getTime() - sample;
    alert('Page loaded in: ' + loadingTime + 'milliseconds')
    localStorage.removeItem("loadTime")
  }
}

另一种可能性是避免重新加载页面，只需在页面开始时设置starttime的值，直接在HTML中，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript">
        var start = Date.now();
    </script>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script>
        window.onload=function(e) {
            var loadingTime = new Date().getTime() - start;
            alert('Page loaded in: ' + loadingTime + 'milliseconds')
        }
    </script>
</head>
<body>

</body>
</html>

Answer 2

为什么不在点击时设置带时间戳的cookie并在流程后阅读？有点脏，但如果仅用于开发目的，你可以这样做。

Answer 3

您可以使用本地存储而不是Cookie。

参见http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local 例如

如何获取网页加载时间

3 个答案: