如何获取网页加载时间

How to get webpage load time

本文关键字：网页 加载 时间 获取 何获取      更新时间：2023-09-26

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

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

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

  1. 在窗口加载时检查本地存储中的 loadTime 变量（无 cookie）

  2. 如果未将其设置为当前时间并重新加载页面

  3. 如果完成加载，则计算加载时间并从本地存储中删除变量。

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

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

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>

为什么不在点击时设置带有时间戳的cookie并在该过程后读取它？有点脏，但如果只是出于开发目的，你可以做到。

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

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

相关文章：