用Performance API检查页面性能的标准化方法

前端

2023-10-30 15:00:51

Performance API：获取页面性能

Performance API 为浏览器提供了一套标准化的方法来测量和分析网页的性能，使开发者能够更轻松地获取有关页面加载时间、资源加载时间、页面渲染时间等重要性能指标的数据，并对这些数据进行分析，从而发现性能瓶颈并进行优化。

浏览器性能指标

Performance API 提供了一系列的性能指标，可用于评估网页的性能。这些指标包括：

导航开始时间（navigationStart） ：这是用户开始与页面交互的时间，通常是用户点击链接或在地址栏中输入 URL 的时间。
重定向开始时间（redirectStart） ：这是浏览器开始重定向到新页面的时间。
重定向结束时间（redirectEnd） ：这是浏览器完成重定向并开始加载新页面的时间。
域查找开始时间（domainLookupStart） ：这是浏览器开始查找新页面的 DNS 记录的时间。
域查找结束时间（domainLookupEnd） ：这是浏览器完成查找新页面的 DNS 记录的时间。
连接开始时间（connectStart） ：这是浏览器开始与新页面的服务器建立连接的时间。
连接结束时间（connectEnd） ：这是浏览器完成与新页面的服务器建立连接的时间。
请求开始时间（requestStart） ：这是浏览器开始向新页面的服务器发送请求的时间。
响应开始时间（responseStart） ：这是浏览器开始收到来自新页面的服务器的响应的时间。
响应结束时间（responseEnd） ：这是浏览器完成收到来自新页面的服务器的响应的时间。
DOM 加载事件开始时间（domLoading） ：这是浏览器开始加载页面 DOM 树的时间。
DOM 加载事件结束时间（domInteractive） ：这是浏览器完成加载页面 DOM 树并使其可交互的时间。
DOM 内容加载事件开始时间（domContentLoaded） ：这是浏览器完成加载页面内容并使其可视的时间。
DOM 内容加载事件结束时间（domComplete） ：这是浏览器完成加载页面所有内容并使其完全可视的时间。
页面加载事件开始时间（loadEventStart） ：这是浏览器开始加载页面资源（如图像、脚本和样式表）的时间。
页面加载事件结束时间（loadEventEnd） ：这是浏览器完成加载页面资源并使其完全可用的时间。

Performance API 的使用

Performance API 提供了一个名为 performance.now() 的方法，可用于测量页面上发生事件的时间。performance.now() 方法返回一个时间戳，单位为毫秒，表示自页面加载以来经过的时间。

要使用 Performance API，您需要在 HTML 文档中包含以下脚本：

<script>
  if (window.performance) {
    var performance = window.performance;
  }
</script>

然后，您可以使用 performance.now() 方法来测量页面上发生事件的时间。例如，以下代码测量页面加载所需的时间：

<script>
  if (window.performance) {
    var performance = window.performance;
    var startTime = performance.now();

    window.onload = function() {
      var endTime = performance.now();
      var loadTime = endTime - startTime;

      console.log("Page load time: " + loadTime + " ms");
    };
  }
</script>