Codes►前端

Performance API

Performance API

Performance API 是 Web API 的一部分，用于测量和分析网页性能的工具。它提供了丰富的性能指标和方法，帮助开发者监控页面加载、资源加载、用户交互等性能数据，从而优化用户体验。

核心概念

  1. Performance Entry
    • 每个性能指标都以 PerformanceEntry 对象表示，包含名称（name）、持续时间（duration）、开始时间（startTime）和类型（type）。
    • 不同类型的性能条目继承自 PerformanceEntry，例如 PerformanceNavigationTiming、PerformanceResourceTiming 等。
  2. 性能时间线
    • Performance API 使用高精度的时间戳记录性能事件，并将这些事件存储在性能时间线中。
    • 开发者可以通过 PerformanceObserver 或 Performance.getEntries() 方法访问这些事件。

主要接口

  1. performance 对象
    • 提供了页面性能的核心接口，包括测量时间戳、记录自定义事件等。
    • 常用属性和方法：
      • performance.mark(name)：在代码中插入一个时间标记。
      • performance.measure(name, startMark, endMark)：测量两个标记之间的时间。
      • performance.getEntriesByType(type)：获取特定类型的性能条目。
      • performance.clearMarks() 和 performance.clearMeasures()：清除标记和测量。
  2. PerformanceObserver
    • 用于监听和处理性能事件，类似于事件监听器。
  3. performance.timing
    • 提供页面加载过程中的详细时间数据，例如 DNS 查询时间、TCP 连接时间、DOM 解析时间等。

支持的性能条目类型

  • navigation：页面导航相关的性能指标。
  • resource：资源加载性能数据，如图片、脚本等。
  • first-input：首次用户输入事件的性能数据。
  • long-animation-frame：长动画帧的性能数据。
  • paint：页面绘制事件。

使用场景

  1. 页面性能监控
    • 测量页面加载时间、资源加载时间等，识别性能瓶颈。
    • 示例代码：
      1
      2
      const loadTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
      console.log(`页面加载时间：${loadTime}ms`);
  2. 资源性能分析
    • 获取资源加载的详细信息，优化资源加载性能。
    • 示例代码：
      1
      2
      3
      4
      const resourceTiming = window.performance.getEntriesByType("resource");
      resourceTiming.forEach((resource) => {
        console.log(`${resource.name} 的加载时间：${resource.duration}ms`);
      });
  3. 用户体验分析
    • 测量用户交互延迟，优化交互性能。
    • 示例代码：
      1
      2
      3
      4
      5
      6
      const interactionStart = Date.now();
      document.addEventListener("click", () => {
        const interactionEnd = Date.now();
        const interactionDelay = interactionEnd - interactionStart;
        console.log(`用户点击延迟：${interactionDelay}ms`);
      });
  4. 性能基准测试
    • 比较不同版本或配置下的性能差异。

优势

  • 提供详细的性能数据，帮助开发者精准定位问题。
  • 支持多种性能指标，覆盖页面加载、资源加载、用户交互等多个方面。
  • 可以与其他 API（如 Navigation Timing API、Resource Timing API）集成，获取更全面的性能数据。
    通过使用 Performance API，开发者可以更好地优化网页性能，提升用户体验。

Performance API 是一个强大的工具，用于监测和分析网页性能。它可以提供多种具体的性能指标，帮助开发者优化用户体验。以下是 Performance API 可以监测的主要性能指标：

1. 页面加载性能

  • 页面导航时间：包括页面加载的各个阶段，如导航开始时间（navigationStart）、重定向时间（redirectStart 和 redirectEnd）、DNS 查询时间（domainLookupStart 和 domainLookupEnd）、TCP 连接时间（connectStart 和 connectEnd）、请求开始时间（requestStart）、响应开始时间（responseStart）、DOM 加载完成时间（domContentLoadedEventEnd）和页面加载完成时间（loadEventEnd）。
  • 首次内容绘制（FCP）和最大内容绘制（LCP）：分别表示页面首次绘制内容和最大内容绘制的时间。
  • 首次输入延迟（FID）：衡量用户首次与页面交互（如点击或输入）时的响应延迟。

2. 资源加载性能

  • 资源加载时间：通过 PerformanceResourceTiming 接口，可以获取页面中每个资源（如图片、脚本、CSS 文件等）的加载时间，包括请求开始时间、响应开始时间和加载完成时间。
  • 资源大小和传输时间：可以获取资源的传输大小（transferSize）和加载持续时间（duration），帮助识别加载较慢的资源。

3. 用户交互性能

  • 事件处理时间：通过 PerformanceEventTiming 接口，可以记录事件处理程序的运行时间，例如点击、输入等操作的响应时间。
  • 长任务检测：通过 PerformanceLongTaskTiming 接口，可以检测耗时超过 50ms 的任务，这些任务可能会影响页面的响应性。

4. 页面渲染性能

  • 布局偏移（Layout Shift）：记录页面布局在动画帧中移动的频率和程度，帮助优化页面的稳定性。
  • 绘制时间：包括首次绘制（firstPaint）和首次内容绘制（firstContentfulPaint）的时间。

5. 内存使用情况

  • JavaScript 堆内存：通过 performance.memory 属性，可以获取 JavaScript 堆的大小限制（jsHeapSizeLimit）、已使用内存（usedJSHeapSize）和总内存（totalJSHeapSize），帮助检测内存泄漏。

6. 自定义性能指标

  • 时间标记和测量：通过 performance.mark() 和 performance.measure()，开发者可以自定义时间标记和测量代码片段的执行时间。

7. 页面可见性

  • 页面可见性状态：通过 PerformanceVisibilityState 接口，可以记录页面在前台或后台的时间，帮助优化资源加载和性能。
    通过这些详细的性能指标，开发者可以全面分析网页的性能表现，精准定位性能瓶颈，并采取优化措施。

实例

performance.timing 是 Performance API 的一部分，它提供了一个包含页面加载各个阶段时间戳的对象。这些时间戳可以帮助开发者分析页面加载过程中的性能瓶颈。以下是 performance.timing 中各个属性的详细说明：

performance.timing 的主要属性

属性名称 描述
navigationStart 页面导航开始的时间戳，即用户发起请求的时间。这是页面加载的起始点。
unloadEventStart 前一个页面卸载（unload）事件触发的时间戳。如果当前页面是新加载的，而不是从另一个页面导航而来，则此值为 0。
unloadEventEnd 前一个页面卸载（unload）事件完成的时间戳。如果当前页面是新加载的，而不是从另一个页面导航而来，则此值为 0。
redirectStart 第一个 HTTP 重定向开始的时间戳。如果页面没有重定向，则此值为 0。
redirectEnd 最后一个 HTTP 重定向完成的时间戳。如果页面没有重定向，则此值为 0。
fetchStart 浏览器准备使用 HTTP 请求获取文档的时间戳。此时可能已经解析了前一个页面的 <link> 预加载指令，或者用户已点击了链接。
domainLookupStart DNS 查询开始的时间戳。如果使用了本地缓存或其他机制跳过 DNS 查询，则此值等于 domainLookupEnd。
domainLookupEnd DNS 查询完成的时间戳。如果跳过了 DNS 查询，则此值等于 domainLookupStart。
connectStart 浏览器开始建立 TCP 连接的时间戳。如果使用了持久连接，则此值等于 connectEnd。
connectEnd 浏览器完成 TCP 连接的时间戳，包括 SSL/TLS 协商时间（如果使用了 HTTPS）。
secureConnectionStart 浏览器开始建立安全连接（SSL/TLS）的时间戳。如果未使用 HTTPS，则此值为 0。
requestStart 浏览器发出 HTTP 请求的时间戳。
responseStart 浏览器接收到 HTTP 响应的第一个字节的时间戳。
responseEnd 浏览器接收到 HTTP 响应的最后一个字节的时间戳。
domLoading 浏览器开始解析 DOM 的时间戳。
domInteractive 浏览器完成 DOM 解析的时间戳，但此时可能仍有样式表、图片或子框架未加载完成。
domContentLoadedEventStart DOMContentLoaded 事件触发的时间戳。
domContentLoadedEventEnd DOMContentLoaded 事件完成的时间戳。
domComplete DOM 完全加载并解析完成的时间戳，此时页面已准备好进行交互。
loadEventStart load 事件触发的时间戳。
loadEventEnd load 事件完成的时间戳。如果页面尚未完成加载，则此值为 0。

示例代码：获取页面加载时间

以下代码展示了如何使用 performance.timing 计算页面加载的各个阶段时间：

1
2
3
4
5
6
7
8
const timing = performance.timing;
console.log(`页面加载总时间：${timing.loadEventEnd - timing.navigationStart} 毫秒`);
console.log(`DNS 查询时间：${timing.domainLookupEnd - timing.domainLookupStart} 毫秒`);
console.log(`TCP 连接时间：${timing.connectEnd - timing.connectStart} 毫秒`);
console.log(`SSL/TLS 协商时间：${timing.connectEnd - timing.secureConnectionStart} 毫秒`);
console.log(`HTTP 请求响应时间：${timing.responseEnd - timing.requestStart} 毫秒`);
console.log(`DOM 加载时间：${timing.domContentLoadedEventEnd - timing.domLoading} 毫秒`);
console.log(`页面加载完成时间：${timing.loadEventEnd - timing.domContentLoadedEventEnd} 毫秒`);

输出示例

1
2
3
4
5
6
7
页面加载总时间：5000 毫秒  
DNS 查询时间：20 毫秒  
TCP 连接时间：30 毫秒  
SSL/TLS 协商时间：50 毫秒  
HTTP 请求响应时间：800 毫秒  
DOM 加载时间：1200 毫秒  
页面加载完成时间：2000 毫秒

注意事项

  1. 浏览器兼容性：performance.timing 在大多数现代浏览器中都得到了支持，但在某些旧版本浏览器中可能不可用。
  2. 隐私和安全：某些浏览器可能会限制对某些时间戳的访问，特别是涉及跨域请求或隐私保护的场景。
  3. 废弃警告：performance.timing 的部分属性（如 unloadEventStart 和 unloadEventEnd）已被废弃，建议使用更现代的 API（如 PerformanceNavigationTiming）来获取更准确的性能数据。
    通过 performance.timing 提供的时间戳，开发者可以深入了解页面加载过程中的各个阶段，从而优化性能瓶颈。