三十二、Performance API: 提升网页性能的利器
引言
在现代 Web 开发中，性能优化是一个关键的方面。用户期望快速加载的网页，而慢速的加载和响应时间可能导致用户流失和不良的用户体验。为了满足用户的需求，我们需要准确地测量和分析网页的性能，并采取相应的优化措施。
Performance API 是浏览器提供的一组接口，可以让开发者测量和监控网页的性能表现。它提供了丰富的属性和方法，可以帮助我们了解网页加载的时间、资源的使用情况、代码执行的性能等关键指标。本文将详细介绍 Performance API 的属性和 API，探讨其应用场景，并提供相关的代码示例和引用资料链接。
1. Performance API 简介
Performance API 是 Web API 的一部分，旨在提供与浏览器性能相关的信息和指标。它通过提供一组属性和方法，使开发者能够测量和分析网页的性能，以便进行性能优化。
Performance API 的核心对象是 performance，它代表了网页的性能信息。通过 performance 对象，我们可以访问各种性能指标、测量和记录时间戳、计算代码执行时间等。
以下是一些常用的 Performance API 属性：
- navigation：提供了与导航相关的性能指标，如页面加载时间、重定向次数、响应时间等。
- timing：提供了与页面加载和资源加载相关的性能指标，如 DNS 查询时间、TCP 连接时间、DOM 解析时间等。
- memory：提供了与内存使用情况相关的性能指标，如内存限制、已使用内存、垃圾回收次数等。
- navigationTiming：提供了更详细的页面加载时间指标，如重定向时间、解析 DOM 树时间、首次渲染时间等。
Performance API 还提供了一些方法，用于测量和记录时间戳、添加标记、计算代码执行时间等。
2. Performance API 属性和 API
1） navigation
performance.navigation 属性提供了与导航相关的性能指标，可以帮助我们了解页面的加载时间、重定向次数、响应时间等。
以下是一些常用的 navigation 属性：
- performance.navigation.type：表示导航类型，如新页面加载、页面刷新、页面后退等。
- performance.navigation.redirectCount：表示页面重定向的次数。
这些 navigation 属性可以用于分析页面的导航行为和性能表现。
示例代码：
console.log(`导航类型: ${performance.navigation.type}`); console.log(`重定向次数: ${performance.navigation.redirectCount}`);
2） timing
performance.timing 属性提供了与页面加载和资源加载相关的性能指标，可以帮助我们了解页面加载的各个阶段所花费的时间。
以下是一些常用的 timing 属性：
- performance.timing.navigationStart：表示页面开始导航的时间。
- performance.timing.fetchStart：表示开始获取页面资源的时间。
- performance.timing.domContentLoadedEventStart：表示 DOMContentLoaded 事件开始的时间。
- performance.timing.loadEventStart：表示 load 事件开始的时间。
这些 timing 属性可以用于分析页面的加载性能，找出加载过程中的瓶颈。
示例代码：
console.log(`导航开始时间: ${performance.timing.navigationStart}`); console.log(`资源获取开始时间: ${performance.timing.fetchStart}`); console.log(`DOMContentLoaded 事件开始时间: ${performance.timing.domContentLoadedEventStart}`); console.log(`load 事件开始时间: ${performance.timing.loadEventStart}`);
带你读《现代Javascript高级教程》三十二、Performance API: 提升网页性能的利器（2）https://developer.aliyun.com/article/1349481?groupCode=tech_library
