1. 什么是 Performance API

1.1 简介

Performance API 提供了一种访问和测量浏览器性能相关信息的方法。通过Performance API，开发者可以获得页面加载时间、资源加载性能、用户交互延迟等详细信息，用于性能分析和优化。

1.2 用例

Performance API旨在帮助开发者定位和解决性能问题，优化页面加载速度和用户体验。它可以在以下场景中使用：

• 网页性能监控

测量分析页面加载时间、资源加载性能、关键渲染路径等指标，了解网页性能瓶颈。

• 性能优化

识别潜在的性能问题并采取相应的优化措施，以提高网页加载速度和响应性能。

• 用户体验分析

通过测量用户交互延迟和动画性能来评估网页的用户体验质量。

• 性能基准

比较不同版本或不同配置之间的性能差异，以评估性能提升效果。

2. 如何使用性能API

Performance API 提供了一组用于获取和测量性能相关信息的方法和属性。以下是一些常见的用法示例：

• 获取页面加载时间

const loadTime =
  window.performance.timing.loadEventEnd -
  window.performance.timing.navigationStart;

console.log(`Page load time: ${loadTime}ms`);

• 测量资源加载时间

const resourceTiming = window.performance.getEntriesByType("resource");
resourceTiming.forEach((resource) => {
  console.log(`${resource.name} load time: ${resource.duration}ms`);
});

• 监控用户交互延迟

const interactionStart = Date.now();
document.addEventListener("click", () => {
  const interactionEnd = Date.now();
  const interactionDelay = interactionEnd - interactionStart;
  console.log(`User click delay:${interactionDelay}ms`);
});

请注意，这些代码仅为示例，实际使用可能需要根据具体要求和浏览器兼容性进行适当处理和兼容性测试。

3. 性能 API 示例

Performance API可以应用于很多场景和优化方案，这里举几个常见的例子：

3.1 页面加载时间监控和优化

使用 Performance API，我们可以监控页面加载时间并对其进行优化。以下是监控页面加载时间和资源加载时间的示例代码：

// Monitoring page load time
const loadTime =
  window.performance.timing.loadEventEnd -
  window.performance.timing.navigationStart;
console.log(`Page load time: ${loadTime}ms`);

// Monitor resource load time
const resourceTiming = window.performance.getEntriesByType("resource");
resourceTiming.forEach((resource) => {
  console.log(`${resource.name} load time: ${resource.duration}ms`);
});

通过获取对象中的时间戳window.performance.timing，我们可以计算出页面的加载时间。另外，通过使用window.performance.getEntriesByType('resource')方法，我们可以获得所有资源的加载性能信息，进一步优化资源加载。

3.2 资源加载性能分析

对于网页中的关键资源，我们通常需要关注其加载时间以进行性能优化。通过Performance API，我们可以监控和分析关键资源的加载性能。下面是监控指定关键资源加载时间的示例代码：

// Monitor the load time of a critical resource
const keyResources = [
  "https://example.com/css/style.css",
  "https://example.com/js/main.js",
];
keyResources.forEach((resource) => {
  const resourceEntry = window.performance.getEntriesByName(resource)[0];
  console.log(`${resource} load time: ${resourceEntry.duration}ms`);
});

通过使用该window.performance.getEntriesByName()方法，我们可以获得特定资源的加载性能信息，进而分析和优化关键资源的加载时间。

3.3 用户交互延迟监控

用户体验是 Web 开发中最重要的因素之一，Performance API 可以帮助我们监控用户与网页交互的延迟以进行优化。以下是监控用户点击延迟的示例代码：

// Monitor user click latency
const interactionStart = Date.now();
document.addEventListener("click", () => {
  const interactionEnd = Date.now();
  const interactionDelay = interactionEnd - interactionStart;
  console.log(`User click delay: ${interactionDelay}ms`);
});

通过记录用户交互的开始时间和结束时间，我们可以计算出用户点击的延迟时间，帮助我们评估和提升用户体验。

3.4 页面动画性能监控

在网页中使用动画可以增强用户体验，但不合理的动画实现可能会导致性能问题。通过 Performance API，我们可以监控页面动画的性能，以便我们对其进行优化。以下是监控动画执行时间的示例代码：

// Monitoring animation performance
function measureAnimationPerformance() {
  const animationStart = performance.now();
  // Execute animation operations
  requestAnimationFrame(() => {
    const animationEnd = performance.now();
    const animationDuration = animationEnd - animationStart;
    console.log(`Animation execution time: ${animationDuration}ms`);
  });
}

measureAnimationPerformance();

在这个例子中，我们使用performance.now()方法获取动画的开始时间和结束时间，并计算动画的执行时间。通过对动画性能的监控，我们可以判断动画是否流畅，是否占用过多资源，从而进行优化和改进。

4.兼容性及优缺点

4.1 兼容性

以下是Performance API在不同浏览器上的兼容性：

• 铬 6+ ?
• 火狐 7+ ?
• 野生动物园 8+ ?
• 边缘 12+ ?
• Internet Explorer：部分支持，支持 IE 9+

建议在实际开发中根据目标用户的浏览器使用情况进行兼容性测试，并根据需要提供替代方案或使用polyfill填补兼容性差异。

有关详细的兼容性信息，请访问我可以使用吗。

4.2 优缺点

性能 API 具有以下优点和缺点：

优点：

• 提供一组丰富的性能指标和测量来全面评估网页的性能。
• 支持访问页面加载时间、资源加载性能、用户交互延迟等关键指标，帮助开发者定位和解决性能问题。
• 启用性能优化和用户体验分析，以提高网页的加载速度和响应能力。

缺点：

• 在某些情况下，获取性能指标可能会对网页性能产生一定的影响，需要谨慎使用。
• 某些较旧的浏览器版本可能不支持，需要兼容性处理或替代解决方案。
• 一些指标的准确性可能会受到浏览器实现和设备性能的限制，需要综合考虑和验证。

使用时，需要结合实际需要和兼容性要求合理使用和处理。

4.3 工具推荐

推荐几个基于 Performance API wrapper 的第三方库：

1. Web Vitals：6.1K ?

用于测量和监控核心 Web 性能指标的库，基于 Performance API，包括 Largest Contentful Paint (LCP)、First Input Delay (FID)、Cumulative Layout Shift (CLS) 和其他指标。

1. Perfume.js：2.8K ?

一个小巧但功能强大的性能指标库，用于监控页面加载时间、关键资源加载时间和用户交互延迟。

1. PerformanceNow.js：100?

一个小型性能计时库，可根据性能 API 的高分辨率时间戳提供更准确的性能测量。

这些库在 Performance API 之上进行包装和扩展，以提供更方便的接口和功能，帮助开发人员更好地监控和优化 Web 性能。我们可以根据具体需求选择合适的库来简化性能监控和分析。

5. 使用建议和注意事项

总结了使用 Performance API 的一些建议和注意事项：

1. 在衡量性能时，您应该选择合适的时间和目标，以避免对页面性能造成额外负担。
2. 注意兼容性问题，根据目标浏览器测试和处理兼容性，考虑使用polyfill或替代方案。
3. 结合其他工具和方法，如浏览器开发者工具、性能分析工具等，综合分析和优化网页性能。
4. 了解不同指标的含义和解释，以避免误解或曲解绩效数据。
5. 使用性能数据进行有针对性的优化，优先考虑影响用户体验的瓶颈。
6. 随着浏览器的更新和标准的发展，关注 Performance API 的最新变化和增强。

6. 总结

Performance API 是一个关键的 JavaScript API，用于访问和测量与浏览器性能相关的信息。它提供了丰富的性能指标和度量，帮助开发者定位和解决性能问题，优化页面加载速度和用户体验。

通过Performance API，可以获得页面加载时间、资源加载性能、用户交互延迟等关键指标，进行性能分析和优化。