如何获取网页加载时间

Question

我需要获取网页的加载时间，但有一个问题。我已经尝试过一些不错的小浏览器插件，比如 Firefox 的 AppTelemetry。但是在单击按钮时，我的页面重定向到另一个页面上的脚本，运行脚本，然后重定向回原始页面并加载页面。我想对整个过程从开始到结束计时。

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

Answer 1

为什么不设置一个带有点击时间戳的 cookie 并在处理后读取它？有点脏，但如果只是为了开发目的，你可以这样做。

Answer 2

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

在 window 加载检查本地存储中的 loadTime 变量（无 cookie）
如果没有设置当前时间重新加载页面
如果加载完成，计算加载时间并从本地存储中删除变量。

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

最好的方法是查看控制台或 write/use 插件。

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")
  }
}

另一种可能性是避免重新加载页面，只需在页面开始时直接设置开始时间的值，直接在 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 3

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

见http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local 举个例子

如何获取网页加载时间

How to get webpage load time

javascript

php

webpage

page-load-time