# 前言大家好，我是抹茶。在前端的工作开发过程当中，大家都想开发出用户体验良好、高性能的页面，但是我们以怎样的方式和指标去衡量性能的好坏呢？ # 前置理解：页面的效果是相对的 * 同样的页面，用户A和用户B感受到的页面性能可能是不一样的。（A在网速好的地方，使用的是高性能的设备，用户B在网络差的地方，用的设备比较老性能差） * 在同样的时间内加载完成的两个网站，网站A可能在用户感官上觉得加载比B快（A进行了渐进式的加载，而网站B等所有资源都到位才一次性展示内容） * 有的网站看起来可能加载、渲染得很快，但是却迟迟无法响应用户的交互（比如: 点击事件、键盘输入） # 基于过去的实践，我们用怎样的新框架衡量指标更合适？过去，常常用`load`事件来衡量，但是`load`时刻并不一定和用户关心的任何时刻相对应。比如，服务器返回很小的页面，load事件很快就触发，但是这是采取请求主要的网页内容。从技术上来说，页面的加载时间短，但是用户在加载上的体验并不一定觉得高效。页面性能需要从多个角度来衡量，单一角度的最优并不不能表示整体的最优。 Chrome团队和W3C Web性能工作组合作，致力于定义和开发一组`新API`和`指标`，对页面性能指标进行标准化，从而更准确衡量用户对页面性能的体验。其框架设计围绕下面几个问题 | 维度 | 细节 | | ------- | -------------------- | | 是否发生？ | 导航成功了吗？服务器有响应吗？ | | 是否有用？ | 有足够多用户感兴趣的内容吗？ | | 是否可用？ | 用户可以与页面互动吗？还是页面一直繁忙？ | | 是否令人愉悦？ | 互动是否顺畅、自然，没有延迟？ | ## 从哪些方式进行衡量效果指标一般通过以下两种方式之一进行衡量： * 实验指标：用工具在一致且受控的环境中模拟页面加载 * 用户互动：真实用户实际加载页面并与之互动一般同时使用这两种方式来确保良好的效果。 ## 从哪些维度定义指标类型 * **感知的加载速度：** 网页能够以多快的速度加载网页中的所有视觉元素并将其呈现在屏幕上 * **加载响应的速度：** 网页为了能够快速响应用户互动而加载和执行任何必须的JS代码的速度 * **运行时的响应速度：** 网页加载后，网页对用户互动的响应速度如何 * **视觉稳定性：** 网页上的元素是否以用户意想不到的方式偏移，并且可能会干扰用户的互动？ * **流畅性：** 过渡和动画是否以一致的帧速率渲染，并在一中状态之间流畅的流动？没有任何一个单一的指标能够充分捕获网页的所有性能特征。 # 当前定义衡量性能的重要指标 * **First Contentful Paint (FCP):** `首次内容绘制` 衡量从网页**开始加载**到网页内容的任何部分在屏幕上呈现的时间。 * **Largest Contentful Paint (LCP):** `最大内容绘制` 衡量从网页**开始加载**到屏幕上呈现最大的文本块或图片元素所用的时间。 * **Interaction to Next Paint (INP):** `交互至下一次绘制` 衡量与网页进行的每个点按、点击或键盘互动的**延迟时间**，并根据互动次数选择网页最差（或接近最长的互动延迟时间）作为单个代表性值，以描述网页的整体响应能力。 * **Total Blocking Time (TBT):** `总阻塞时间` 衡量FCP和TTI之间的总时长，在该时间段内，主线程处于阻塞状态的时长。 * **Cumulative Layout Shift (CLS):** `累计布局偏移` 衡量从网页开始加载到其生命周期状态变为隐藏期间发生的所有意外布局偏移的累计得分。 * **Time to First Byte (TTFB):** `首字节时间` 衡量网络使用资源的第一个字节响应用户请求所需的时间。 # 自定义指标会用到的API ## 核心：Performance Observer API Performance Observer API 是一种机制，用于收集和现实所有其他核心Performance API的数据 PerformanceObserver的回调将浏览器在空闲时段触发，通常不会干扰到页面性能。创建`PerformanceObserver`时，传递一个回调函数。使用`observe()`方法可以告知观察器要监听哪些类型的数据。 ```js const po = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { // 打印条目和相关的细节 console.log('performanceObserver',entry.toJSON()); } }); po.observe({type: 'some-entry-type'}); ``` 通过`PerformanceObserver.supportedEntryTypes`属性检查有哪些类型可用。 ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/a58bfaa513a34feda7a792ff52496781~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oq56Iy25Yaw5reH5reL:q75.awebp?rk3s=f64ab15b&x-expires=1768515738&x-signature=9GBLjxfaYLUJ5NEizB9ROhoOpW8%3D) ```js [ "element", "event", "first-input", "largest-contentful-paint", "layout-shift", "long-animation-frame", "longtask", "mark", "measure", "navigation", "paint", "resource", "visibility-state" ] ``` 如果要获取历史的数据，调用`observe()`时将`buffered`标志设置为`true`。 ```js po.observe({ type:'some-entry-type', buffered:true, }) ``` ## 具体的各个性能指标API（以PerformanceObserver观察对象做区分） ### 1. User Timing API User Timing API是一种通用的测量api。它支持在任意地方做标记，然后测量标记之间的用时。 ```js // Record the time immediately before running a task. performance.mark('myTask:start'); await doMyTask(); // Record the time immediately after running a task. performance.mark('myTask:end'); // Measure the delta between the start and end of the task performance.measure('myTask', 'myTask:start', 'myTask:end'); ``` 如果需要报告User Timing测量结果，可以使用PerformaceObserver进行注册，并观察`measure`类型的条目。 ```js // Create the performance observer. const po = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { // Log the entry and all associated details. console.log(entry.toJSON()); } }); // Start listening for `measure` entries to be dispatched. po.observe({type: 'measure', buffered: true}); ``` 采用自定义`mark`，`measure`类型监测到的数据如下所示： ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f0331ca160864ed1b781ef599a80f74e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oq56Iy25Yaw5reH5reL:q75.awebp?rk3s=f64ab15b&x-expires=1768515738&x-signature=cNmDaJVD8FJplBOOMHGcZDEfv4I%3D) ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7eacc75b496b450093ab5e8ca2249f10~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oq56Iy25Yaw5reH5reL:q75.awebp?rk3s=f64ab15b&x-expires=1768515738&x-signature=gOsQ4HiiD%2Fstevr37AZxhyRI9JU%3D) ### 2. Long Animation Frames API Long Animation Frames API处理的是超过50毫秒的长帧。可以用PerformanceObserver注册并观察`long-animation-frame`类型的条目。 ```js // Create the performance observer. const po = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { // Log the entry and all associated details. console.log(entry.toJSON()); } }); // Start listening for `long-animation-frame` entries to be dispatched. po.observe({type: 'long-animation-frame', buffered: true}); ``` Long Animation Frames可以收集到的数据如下图： ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d48fa90e23434c119d9e25a2232036fb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oq56Iy25Yaw5reH5reL:q75.awebp?rk3s=f64ab15b&x-expires=1768515738&x-signature=LjtRPwtwgq0585YPZPQgKAjGh0U%3D) ### 3. Element Timing API Largest Contentful Paint(LCP)指标有助于了解最大的图片或者文本块何时绘制屏幕。LCP API实际上是基于Element Timing API来构建的，并且添加了**针对最大内容元素的自动报告**。也可以通过对HTML元素明确添加`elementtiming`实行并注册PerformanceObserver来观察`element`条目类型来报告其他元素（也就是可以自己设定哪个是最大内容元素）。 ```html

This is text I care about.

``` 对应的监控数据如下： ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/f9741b6777ac4faf8d2fe793032d33c7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oq56Iy25Yaw5reH5reL:q75.awebp?rk3s=f64ab15b&x-expires=1768515738&x-signature=IczohaA%2F4ClhWhWif20cHUAFztM%3D) ### 4. Event Timing API Interaction to Next Paint (INP) 指标通过观察网页在整个生命周期内的所有点击、点按和键盘互动情况来评估总体网页响应能力。网页的 INP 通常是指从**用户发起互动到浏览器绘制下一帧以显示用户输入的视觉结果，完成时间最长的互动**。可以通过 Event Timing API 使用 INP 指标。此 API 公开了事件生命周期中发生的许多时间戳，包括： * **startTime：** 浏览器收到事件的时间。 * **processingStart：** 浏览器能够开始处理事件的响应脚本时间。 * **processingEnd：** 浏览器完成从此事件的事件处理脚本发起的所有同步代码的操作的时间。 * **duration：** 浏览器收到事件到能够绘制下一帧所用的时间（出于安全考虑，四舍五入为 8 毫秒）。执行完从事件处理脚本发起的所有同步代码后，浏览器可绘制下一帧。 ```js const po = new PerformanceObserver((entryList) => { // 获取最后观察到的交互 const entries = Array.from(entryList.getEntries()).forEach((entry) => { // 获取各种交互数据： // 脚本开始执行前的延迟时间 const inputDelay = entry.processingStart - entry.startTime; // 处理脚本的执行时间 const processingTime = entry.processingEnd - entry.processingStart; const presentationDelay = entry.startTime + entry.duration - entry.processingEnd; const duration = entry.duration; const eventType = entry.name; const target = entry.target || "(not set)" console.log("----- INTERACTION -----"); console.log(`输入延迟 (ms): ${inputDelay}`); console.log(`事件处理的时间 (ms): ${processingTime}`); console.log(`事件响应的整体滞后时间 (ms): ${presentationDelay}`); console.log(`事件总的持续时间(ms): ${duration}`); console.log(`事件类型: ${eventType}`); console.log(target); }); }); // A durationThreshold of 16ms is necessary to include more // interactions, since the default is 104ms. The minimum // durationThreshold is 16ms. po.observe({type: 'event', buffered: true, durationThreshold: 16}); ``` 监测到的数据如下图: ![image.png](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fd7db64c148348bf9a3024a19424da82~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5oq56Iy25Yaw5reH5reL:q75.awebp?rk3s=f64ab15b&x-expires=1768515738&x-signature=3FnWyUYobYIGic8P8chYWQTN1%2F8%3D) ### 5. Resource Timing API 通过Resource Timing API, 可以详细了解网页的资源是如何加载的。可以访问的数据包括 * **initiatorType：** 资源的获取方式：例如从 ```