【前端】有关 performance 的那些知识

前端中有关 Performance 的知识

在前端开发中，Performance 是一个非常重要的概念，它隶属于 BOM（Browser Object Model），用于帮助开发者测量和分析网页的性能。以下是对 Performance 及其相关概念的详细解释：

一、Performance 基本概念

Performance 提供了一个接口，允许开发者获取网页在加载和运行过程中产生的各种性能数据。这些数据可以帮助开发者优化网页性能，提升用户体验。

二、getEntries 方法

getEntries 是 Performance 接口中的一个方法，它返回一个包含所有性能条目的数组。每个性能条目（PerformanceEntry）都描述了浏览器中某一个行为的性能指标。这些条目可以包括资源文件的加载性能、fetch 或 xhr 请求的性能、事件的性能等。

• 性能条目的类型：性能条目的类型由 entryType 属性决定，常见的类型有 resource（资源文件）、navigation（导航）、paint（绘制）等。
• 性能条目的属性：每个性能条目都包含一系列的时间点属性，如 startTime、duration 等，用于描述该性能条目的开始时间、持续时间等。

例如，当使用 getEntries 方法获取页面中的性能条目时，可以得到一个包含多个 PerformanceEntry 实例的数组。每个实例都描述了页面中某个资源或行为的性能数据。

三、PerformanceEntry 的继承关系

PerformanceEntry 是所有性能条目的基类，其他类型的性能条目（如 PerformancePaintTiming、PerformanceNavigationTiming、PerformanceResourceTiming 等）都是对 PerformanceEntry 的继承。这些继承类提供了更具体的性能数据，如绘制时间、导航时间、资源加载时间等。

四、关键性能指标

1. First Paint（首屏渲染时间）：

   定义：当第一个像素点呈现在页面上的时候。

   重要性：反映了浏览器开始渲染页面的时间，是用户体验的重要指标之一。

2. First Contentful Paint（首次内容渲染时间）：

   定义：第一个 DOM 元素呈现在页面上的时候。

   重要性：标志着页面开始呈现有意义的内容，对于用户体验和搜索引擎优化都非常重要。

3. DOMContentLoaded：

   定义：所有的 DOM 已经加载到页面上的时间（但样式可能还没使用，img 里面的图片资源还没有拉回来）。

   重要性：标志着页面结构已经加载完成，可以开始执行脚本或进行其他操作。

4. Load：

   定义：样式已经采用，且 DOM 内的各种资源文件已经拿到，比如 img 的 src。

   重要性：标志着页面及其所有资源都已经加载完成，是页面加载完成的最终状态。

五、PerformanceNavigationTiming 细节

PerformanceNavigationTiming 是 PerformanceEntry 的一个继承类，用于描述导航相关的性能数据。它包含了一系列的时间点属性，如 startTime、unloadEventStart、unloadEventEnd、redirectStart、redirectEnd、fetchStart、domainLookupStart、domainLookupEnd、connectStart、connectEnd、requestStart、responseStart、responseEnd、domLoading、domInteractive、domContentLoadedEventStart、domContentLoadedEventEnd、domComplete、loadEventStart、loadEventEnd 等。

这些属性可以帮助开发者详细了解页面导航过程中的各个阶段所花费的时间，从而进行针对性的优化。

六、总结

Performance 是前端开发中非常重要的一个工具，它提供了丰富的性能数据，帮助开发者优化网页性能。通过合理使用 getEntries 方法、了解 PerformanceEntry 的继承关系以及关注关键性能指标（如 First Paint、First Contentful Paint、DOMContentLoaded、Load 等），开发者可以更加精准地定位性能瓶颈，提升用户体验。