js PerformanceObserver 的entryTypes 所有类型

发布时间 2023-09-14 04:49:40作者: 完美前端

1. navigation - 页面性能

这个 entryType 提供了与页面导航相关的性能度量。它可以告诉我们页面从开始加载到完全加载的整个过程中发生了什么。通过这些数据,我们可以了解到例如DNS解析时间、TCP握手时间、页面响应时间、页面下载时间等。
应用场景: 当用户访问你的网站时,你可以使用 navigation 来检测页面加载的每个阶段所需的时间,然后找出可能的性能瓶颈。

2. resource - 资源加载性能

这个 entryType 提供了与页面中特定资源加载相关的性能度量,如图片、CSS、JS文件等。它可以帮助我们了解每个资源文件的加载时间、大小以及可能的延迟。
应用场景: 如果你的页面有很多图片或第三方脚本,并且想要知道哪些资源加载时间过长或者失败,resource 类型可以提供这些信息。

3. longtask - 长时间任务

当一个任务在主线程上运行的时间超过50毫秒时,它就会被标记为 "longtask"。这些长时间的任务可能会导致页面卡顿,影响用户体验。
应用场景: 如果用户反馈说你的页面有时会变得不太响应,你可以使用 longtask 来检测是否有长时间运行的任务导致页面卡顿。

4. paint

这个 entryType 提供了与页面绘制相关的性能度量,如首次内容绘制 (FCP) 和最大内容绘制 (LCP)。它可以帮助我们了解页面的视觉渲染速度。
应用场景: 当你想要提高页面的渲染速度,或者跟踪页面的首屏加载时间,paint 类型将是一个非常有用的工具。

5. largest-contentful-paint - 最大内容绘制

Largest Contentful Paint (LCP) 衡量的是视窗中最大的内容元素渲染完成的时间。这通常代表了用户在页面上看到的主要内容已经可用,因此这是一个非常关键的性能指标。
应用场景: 如果你想知道用户何时看到页面上的主要内容,例如文章的主题图或核心段落,LCP 可以为你提供这一信息。

6. first-input - 首次输入延迟

First Input Delay (FID) 测量的是用户首次与页面交互(例如点击链接或按钮)到页面开始处理这次交互的时间。这个指标反映了页面的响应性。
应用场景: 如果你想确保页面对用户的交互反应迅速,特别是在初次加载时,FID 是一个关键指标。

7. layout-shift - 布局偏移

Cumulative Layout Shift (CLS) 是一个测量页面视觉稳定性的指标。它衡量了视觉内容在加载过程中的不预期偏移。一个高的 CLS 分数意味着页面中的内容在加载时有大量的意外移动,这可能会干扰用户体验。
应用场景: 如果用户反馈页面内容在加载时跳动或移位,CLS 可以帮助你识别并解决这些问题。

8. mark 和 measure - 自定义性能标记和测量

使用 `performance.mark`,开发者可以在代码中设置自定义的性能标记。而 `performance.measure` 则可以测量两个标记之间的时间。这为开发者提供了一种灵活的方式,来测量代码中特定部分的执行时间。
应用场景: 当你想要详细了解某个功能或组件的性能表现时,mark 和 measure 可以帮助你精确地测量它们的执行时间。

9. frame - 动画帧性能

这个 entryType 与 `requestAnimationFrame` 回调相关的性能度量有关。它提供了每个动画帧的性能数据,帮助开发者了解动画或页面滚动的流畅度。
应用场景: 当你在开发复杂的动画或高度交互性的应用时,可以使用 frame 来监控每个动画帧的性能,确保动画流畅。

10. server - 服务器定时度量

服务器定时度量提供了与服务器交互相关的性能数据,例如请求到服务器的时间、服务器处理请求的时间以及响应返回到客户端的时间。
应用场景: 当你想了解服务器的响应时间或查找可能的服务器性能瓶颈时,server 类型可以为你提供宝贵的数据。

11. event - 事件处理性能

这个 entryType 提供了关于事件处理器执行时间的性能数据。例如,当用户点击一个按钮时,关联的事件处理器需要多长时间来响应。
应用场景: 如果你的应用需要处理大量的事件或复杂的事件逻辑,并且你想确保这些事件处理器的响应时间是可以接受的,那么 event 类型将是非常有用的。

12. timing - 通用时间度量

这个 entryType 提供了各种时间度量,包括与页面加载、渲染和其他关键过程相关的时间。这是一个非常广泛的类别,可以包括从页面开始加载到完全交互的整个过程。
应用场景: timing 可以为你提供一个全面的性能概览,帮助你了解整个页面生命周期中的每一个阶段。

13. element - 元素的可见性和大小变化

这个 entryType 主要与元素的可见性或大小变化相关。它允许开发者追踪指定元素的显示状态和尺寸,从而了解元素如何影响页面性能和用户体验。
应用场景: 如果你正在开发一个具有动态内容或响应式设计的网站,并且需要确保元素的变化不会对性能产生负面影响,那么 element 类型将是一个有用的工具。

14. redirect - 重定向时间

这个 entryType 提供了与页面重定向相关的性能数据。它可以帮助开发者了解从一个页面跳转到另一个页面所需的时间,包括服务器响应时间和页面加载时间。
应用场景: 当你的网站或应用中有许多重定向操作,特别是当你想优化登录、注册或付款流程时,redirect 类型可以为你提供关于这些操作的性能数据。

15. error - 错误追踪

这个 entryType 允许开发者追踪页面上的错误事件,如 JavaScript 运行时错误。通过捕获和记录这些错误,开发者可以更快地定位并解决潜在的问题。
应用场景: 当你需要一个实时的错误追踪系统,以确保生产环境中的应用尽可能地无错误时,error 类型可以为你提供即时的错误反馈。

16. unload - 页面卸载时间

`unload` entryType 提供了有关页面卸载事件的性能数据。这可以帮助开发者了解在导航到新页面之前,旧页面卸载所需的时间。
应用场景: 当你需要确保页面能够快速卸载,释放资源,以便新页面能够迅速加载时,可以使用 unload 类型来检测潜在的延迟或问题。

17. user-timing - 用户自定义的时间度量

`user-timing` 是一个非常灵活的 entryType,允许开发者使用 `performance.mark` 和 `performance.measure` 方法自定义特定的时间度量。这使得开发者可以更精确地追踪特定代码段或功能的性能。
应用场景: 当你需要度量特定功能或代码块的性能,如某个组件的渲染时间或某个算法的执行时间,你可以使用 user-timing 来获得详细的数据。

18. link - 预取和预加载性能

`link` entryType 与 `rel=preload` 和 `rel=prefetch` 这样的浏览器资源提示有关。它提供了有关预加载和预取资源的性能信息,帮助开发者了解这些资源提示的效果。
应用场景: 当你使用资源提示来优化页面加载性能时,可以使用 link 类型来监控预加载或预取资源的加载时间和效果。

19. worker - Web Workers 性能

这个 entryType 提供了关于 Web Workers 的性能数据。Web Workers 允许在后台线程上运行 JavaScript,不干扰主线程。通过监控它们的性能,开发者可以确保这些后台任务高效地运行。
应用场景: 当你的应用使用 Web Workers 来处理后台任务,如数据处理或复杂数学运算时,你可以使用 worker 类型来追踪这些任务的性能。

20. animation - 动画性能

`animation` entryType 提供了与CSS和JavaScript动画相关的性能数据。这些数据可以帮助开发者确保动画流畅、无延迟。
应用场景: 当您的应用或网站包含复杂的动画效果,并且您希望它们在所有设备上都能流畅运行时,animation 类型可以为您提供关键的性能指标。

21. dom - DOM操作性能

这个 entryType 提供了关于DOM操作的性能数据,包括节点的插入、删除和修改。高效的DOM操作对于前端性能至关重要,尤其是在复杂的单页应用中。
应用场景: 当你的应用有大量的DOM操作,如动态加载内容或交互式组件,使用 dom 类型可以帮助你找到性能瓶颈。

22. memory - 内存使用情况

`memory` entryType 提供了页面的内存使用情况,包括JS对象、图片和其他资源的内存占用。这对于避免内存泄漏和优化高性能应用至关重要。
应用场景: 对于大型应用或长时间运行的单页应用,监控内存使用情况可以帮助你识别和解决内存泄漏问题。

23. network - 网络请求的性能

`network` entryType 提供了与网络请求相关的性能数据,包括请求的开始时间、结束时间、与服务器的往返时间等。这些数据可以帮助开发者优化网络请求,确保数据快速、准确地传输。
应用场景: 当您的应用依赖于外部API或其他网络资源,并且您希望优化这些请求以提高性能时,network 类型可以为您提供有价值的洞察。

24. storage - 存储性能

`storage` entryType 与浏览器的存储API(如 localStorage 和 IndexedDB)的性能有关。这可以帮助开发者了解存储操作的速度和效率。
应用场景: 如果您的应用需要缓存大量数据或使用复杂的客户端存储策略,使用 storage 类型可以帮助您监控和优化存储性能。