带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器（2）https://developer.aliyun.com/article/1349481?groupCode=tech_library
3. Performance API 应用场景
Performance API 在 Web 开发中有许多应用场景，下面是一些常见的应用场景：
1）性能优化
通过使用 Performance API，我们可以测量和分析网页的性能指标，如加载时间、资源使用情况、代码执行时间等。这些指标可以帮助我们了解网页的性能瓶颈，并采取相应的优化措施。例如，通过分析页面加载时间的各个阶段所花费的时间，我们可以找出加载过程中的瓶颈，并进行相应的性能优化。
示例代码：
const startTime = performance.timing.navigationStart;const loadTime = performance.timing.loadEventStart - startTime; console.log(`页面加载时间: ${loadTime} 毫秒`);
2）监控页面资源
Performance API 可以帮助我们监控页面的资源使用情况，包括网络请求、DOM 元素和脚本执行等。通过分析资源加载时间、资源大小等指标，我们可以找出资源使用不当或过度使用资源的问题，从而进行优化。
示例代码：
const resourceEntries = performance.getEntriesByType('resource'); resourceEntries.forEach((entry) => { console.log(`资源 URL: ${entry.name}`); console.log(`资源加载时间: ${entry.duration} 毫秒`); console.log(`资源大小: ${entry.transferSize} 字节`);});
3）监控内存使用情况
使用 Performance API 的 memory 属性，我们可以监控页面的内存使用情况。通过了解页面的内存限制、已使用内存、垃圾回收次数等信息，我们可以及时发现内存泄漏或过度使用内存的问题，并进行优化。
示例代码：
console.log(`JavaScript 堆大小限制: ${performance.memory.jsHeapSizeLimit}`); console.log(`已使用的 JavaScript 堆大小: ${performance.memory.usedJSHeapSize}`); console.log(`JavaScript 堆的总大小: ${performance.memory.totalJSHeapSize}`);
4）分析代码执行时间
通过使用 Performance API 的 now() 方法，我们可以测量代码的执行时间。这对于优化关键代码块的性能非常有帮助，可以找出代码执行中的瓶颈，从而进行优化。
示例代码：
const startTime = performance.now(); // 执行一些耗时的操作 const endTime = performance.now();const executionTime = endTime - startTime; console.log(`代码执行时间: ${executionTime} 毫秒`);
4. 结论
Performance API 是浏览器提供的一个强大工具，可用于测量和优化网页的性能。通过使用 Performance API 提供的属性和方法，我们可以准确地测量网页加载时间、资源使用情况和代码执行时间等关键指标。这些指标可以帮助我们了解网页的性能瓶颈，并采取相应的优化措施。
在实际应用中，我们可以根据性能优化的需求使用 Performance API，从而提升网页的加载速度、响应时间和用户体验。
5. 参考资料
- MDN Web Docs: Performance APIopen in new window
- Google Developers: Measuring Performance with the User Timing APIopen in new window
- W3C: High Resolution Time Level 2open in new window
- Google Developers: Measuring Performance in a Web Page
