【前端工程化-性能优化】性能优化系列之用户体验的问题分析与定位

前言

用户角度的性能指标

用户感知的指标

• 感知的加载速度：网页加载并将其所有视觉元素呈现到屏幕的速度
• 加载响应速度：网页加载和执行任何必需的 JavaScript 代码的速度，以便让组件快速响应用户互动
• 运行时响应速度：网页加载后，网页能够以多快的速度响应用户互动
• 视觉稳定性：网页上的元素是否会以用户意想不到且可能会干扰互动的方式发生变化，比如图片加载后出现偏移闪动
• 流畅性：过渡和动画否以一致的帧速率渲染并流畅呈现

著名 2-5-8 原则：

• 当用户能够在 2 秒以内得到响应时，会感觉系统的响应很快；
• 当用户在 2-5 秒之间得到响应时，会感觉系统的响应速度还可以；
• 当用户在 5-8 秒以内得到响应时，会感觉系统的响应速度很慢，但是还可以接受；
• 而当用户在超过 8 秒后仍然无法得到响应时，会感觉系统糟透了，或者认为系统已经失去响应，而选择离开这个 Web 站点，或者发起第二次请求。

参考：《最全的前端性能定位总结》

以用户体验为中心的性能指标（Google）

Google，于 2020 年提出了以用户为中心的"核心网页指标"，衡量一个网页的用户体验（加载、互动、视觉稳定）优良度。具体的核心指标如下：

FCP（First Contentful Paint）首次内容绘制

什么是FCP？

FCP，首次内容绘制。该指标用于测量从网页加载到任何一部分呈现在屏幕上的时间。用户访问 Web 页面过程中，在 FCP 之前页面处于白屏，没有实际内容。（如下图所示）

内容 ：是指文本、图片（包括背景图片）、<svg> 元素或非白色 <canvas> 元素。

什么算良好的FCP得分？

为了达到良好的用户体验，网页应尽力将 FCP 控制在1.8秒以内，不妨将网页加载的第75百分位 作为衡量阈值。

• 小于1.8秒，表示页面加载较快，白屏时间短
• 1.8秒至3秒，表示页面加载较慢，但基本能接受
• 3秒以上，表示页面加载很慢，白屏时间过长

LCP（Largest Contentful Paint）最大内容绘制

什么是LCP？

LCP，最大内容绘制。该指标用来测量从网页加载到网页最大内容（文本块/图片元素）呈现在屏幕上的时间。

最大内容元素有哪些？

• <img>元素
• <svg>内的 <image> 元素
• 包含海报图片的<video> 元素
• 为自动播放<video>元素而绘制的第一帧
• 动画图片（如 GIF 动画）的第一帧
• 包含文本节点或其他内嵌级别文本元素的子项的块级元素

什么算良好的 LCP 得分？

为了达到良好的用户体验，网页应尽力将 LCP 控制在2.5秒以内，不妨将网页加载的第75百分位 作为衡量阈值。

CLS（Cumulative Layout Shift）

什么是 CLS？

CLS，页面整个生命周期内发生的所有意外布局偏移的累计分数。（累计布局偏移分数 = 影响比例 * 距离比例）

影响比例

影响比例，是上一帧的所有不稳定元素与当前帧的可见区域（占总面积的比例）的并集就是当前帧的影响比例。 在上图中，一个元素占据了一帧的一半视口。然后，在下一帧中，该元素会向下移动 25% 的视口高度。红色虚线矩形表示元素在两个帧中可见区域的并集，在本例中占总视口的 75%，因此其影响比例 为 0.75。

距离比例

距离比例，是任何不稳定元素在框架内移动的距离（水平/垂直方向）的最大距离除以视口的尺寸（宽度/高度，以较大者为准）。

在上例中，最大的视口尺寸为高度，不稳定的元素移动了视口高度的 25%，使得距离比例 为 0.25。

因此布局偏移分数 为 0.75 * 0.25 = 0.1875。

什么算良好的 CLS 得分？

FID（First Input Delay）

什么是 FID？

FID，测量的是用户首次与网页互动（点链接、点按钮等）到浏览器响应该互动的时间。

什么算良好的 FID 得分？

INP（Interaction to Next Paint）

什么是 INP？

2024年3月，INP将取代FID，用于观察用户与网页进行的所有互动的延迟时间。INP较低时意味着网页能够快速响应绝大多数用户互动。

什么算良好的 INP 得分？

TTFB 首字节时间

什么是 TTFB？

TTFB，用于测量资源请求与响应第一个字节之间的时间。

什么算良好的 TTFB？

TTI（Time To Interacive）可交互时间

什么是 TTI？

TTI，用于测量从网页开始加载到主要子资源已加载且能够快速响应用户输入的时间。（TTI，即是静默期之前的最后一个长任务结束时间。如果未找到长任务，则与FCP相同）

TBT（Total Blocking Time）总阻塞时间

TBT，用于测量 FCP 和 TTI 之间的总阻塞时间（TBT=FCP+TTI）。这段时间内主线程处于阻塞状态的时间足够长，足以阻止输入响应。

例如，我们来看下图，展示了网页加载期间的浏览器主线程： 上面的时间轴包含五个任务，其中三个任务是长时间任务，因为其时长超过 50 毫秒。下图显示了每个耗时较长的任务的阻塞时间： 根据上图阻塞的任务时长，可计算得出 TBT = 200+40+105 = 345毫秒。

更多指标详见：以用户为中心的效果指标

性能指标的计算

方式1：引入 web-vitals 官方库进行计算

import { onFCP, onLCP, onFID, TTFB } from 'web-vitals';

onFCP(console.log);
onLCP(console.log);
onFID(console.log); 
onTTFB(console.log); 

方式2：通过performance api 进行计算

通过performance api，不仅可以计算网络相关耗时，也可以计算性能指标，比如白屏时间FP、FCP、LCP、FID、CLS、TTFB等。

performance.timing

参数	作用
navigationStart	（该页面的起始时间）同一个浏览器上下文的上一个文档卸载结束的时间戳；如果没有上一个文档，该值和 fetchStart 相同
unloadStart	unload 事件触发时的时间戳，如果没有上一个文档，这个值为0
unloadEnd	unload 事件处理完成的时间戳，如果没有上一个文档，这个值为0
redirectStart	第一个 HTTP 重定向开始时的时间戳，如果没有重定向或重定向中一个不同源，则返回0
redirectEnd	最后一个 HTTP 重定向完成时的时间戳，如果没有重定向或重定向中一个不同源，则返回0
fetchStart	浏览器准备好使用 HTTP 请求来获取文档的时间戳。这个时间点会在检查任何应用缓存之前
domainLookupStart	域名查询开始的时间戳，如果使用了持久连接或缓存，则与 fetchStart 一致
domainLookupEnd	域名查询结束的时间戳，如果使用了持续连接或者缓存，则与 fetchStart 一致
connectStart	HTTP 请求开始向服务器发送时的时间戳，如果使用了持续连接，则与 fetchStart 一致
connectEnd	浏览器与服务器之间连接建立（TCP握手全部结束）的时间戳，如果使用了持续连接，则与 fetchStart 一致
requestStart	浏览器向服务器发出 HTTP 请求时的时间戳
responseStart	浏览器从服务器收到（或本地缓存读取）第一个字节时的时间戳
responseEnd	浏览器从服务器收到（或本地缓存读取）最后一个字节时的时间戳
domLoading	当网页 DOM 结构开始解析时的时间戳
domInteractive	当前网页 DOM 结构解析完成，开始加载内嵌资源时的时间戳
domComplete	当前文档解析完成的时间戳
loadEventStart	load 事件被发送时的时间戳，如果这个事件还未被发送，它的值将会是 0
loadEventEnd	load 事件结束的时间戳，如果这个事件还未被发送，它的值将会是 0

网络相关数据

1. 重定向耗时

redirectEnd - redirectStart

2. DNS 解析耗时

domainLookupEnd - domainLookupStart

3. TCP 链接耗时

connectEnd - connectStart

4. HTTP 请求耗时

responseEnd - requestStart

5. 解析 DOM 树耗时

domComplete - domLoading

性能指标数据

Performance.timing 被弃用后，可通过 PerformanceObserver 来获取性能指标，具体计算如下：

1. 白屏时间 FP

白屏时间 FP（First Paint）指的是从用户输入url开始到页面有内容展现出来的时间节点。（这个过程包括DNS查询、TCP连接、HTTP请求、返回 HTML、解析HTML）

FP 通过 PerformanceObserver 实例对象中监听名为 first-paint 的 paint 条目获取，具体代码如下：

const entryHandler = (list) => {
    for(const entry of list.getEntries()){
        if(entry.name === 'first-paint') {
            observer.disconnect()
        }
        // 白屏时间
        let FP = entry.startTime;
    }
}
const observer = new PerformanceObserver(entryHandler)
observer.observe({type: 'paint', buffered: true})

2. 首次内容绘制 FCP

FCP 通过 PerformanceObserver 实例对象中监听名 first-contentful-paint 的 paint 条目获取，具体代码如下：

const entryHandler = (list) => {
    for(const entry of list.getEntries()){
        if(entry.name === 'first-contentful-paint') {
            observer.disconnect()
        }
        // 首次内容绘制时间
        let FCP = entry.startTime;
    }
}
const observer = new PerformanceObserver(entryHandler)
observer.observe({type: 'paint', buffered: true})

3. 最大内容绘制 LCP

LCP 通过 PerformanceObserver 实例对象的 largest-contentful-paint 条目获取，具体代码如下：

const entryHandler = (list) => {
   for(const entry of list.getEntries()){
       observer.disconnect()
       // 最大内容绘制
       let LCP = entry.startTime
   }
}
const observer = new PerformanceObserver(entryHandler);
observer.observe({ type: 'largest-contentful-paint', buffered: true });

4. 累计布局偏移分数 CLS

CLS 通过 PerformanceObserver 实例对象的 layout-shift 条目获取，具体代码如下：

const entryHandler = (list) => {
   for(const entry of list.getEntries()){
        console.log('Layout Shift:', entry)
   }
}
new PerformanceObserver(entryHandler);
observer.observe({ type: 'layout-shift', buffered: true });

性能检测工具

LightHouse

Chrome开发者工具LightHouse面板，主要针对"Performance性能、 Accessibility可访问性、Best Practice最佳实践、SEO搜索引擎优化、Pregressive Web App离线应用" 5个方面做了分析。我们常使用该工具做页面Performance性能检测，并制定合适优化方案落地。

Performance 性能区域列出了 FCP、LCP、TBT、CLS、Speed Index 5个核心指标，并给出具体优化方案。

WebPage Test

WebPage Test，输入需要检测的网页url地址即可进行性能检测。

问题分析定位工具

Chrome开发者工具

1. Network面板（定位网络请求问题）

Network 面板主要是用来分析定位网络请求问题，其面板主要有"过滤、概览、查看详情"3个功能区域。

Network Filter 过滤

Network Overview 概览

Network面板可查看的基本信息有：

• 请求的name名称、size大小、method方法、status状态码、scheme协议类型、protocol协议版本、type类型、initiator调用堆栈等
• 请求的响应时长
• 请求的瀑布图waterfall
  • Queued at 浏览器将资源放入队列时间
  • Started at 浏览器开始处理资源的时间
  • Queueing 资源放入队列的等待处理时间（如果遇到高优先级或请求超过并发限制，需要等待）
  • Stalled 因放入队列而发生的停滞时间
  • Request sent 请求发送的时间
  • Waiting for server response 等待服务器端返回数据的时间（TTFB）
  • Content Download 浏览器下载资源的时间

Network 请求详情

2. Performance面板（定位页面渲染性能问题）

Perfomance 面板，主要分析定位页面渲染性能问题（HTML解析、JS执行、CSS解析布局计算重排、Painting绘制）。我们来看看该面板几个区域的主要功能：

• 区域1：控制面板：录制页面加载/操作、清空、快照/内存捕捉等
• 区域2：概览面板
  • FPS：帧率，每秒帧数
  • CPU：处理各个任务花费的时间
  • NET：各个请求花费时间
  • HEAP：内存消耗记录，包括存在内存未销毁的js变量、文档量、dom节点、事件监听、GPU占用内存等
• 区域3：线程面板
  • Network：各个请求发生的时间点
  • Frames：帧线程
  • Main：主线程，负责加载、执行JavaScript，解析html、css，生成render树，完成绘制painting（帮助我们理解浏览器的页面渲染原理）
  • Raster：Raster线程，负责完成某个layer或者某些块的绘制
  • GPU：图层处理，负责将合成帧绘制到屏幕
• 区域5：统计面板

3. Memory面板（定位内存问题）

Memory面板，主要用来分析定位内存问题，常用来辅助解决内存泄漏问题。我们来看看该面板记录内存的哪些信息：

• Constructor 数据类型结构，比如对象、数组、字符串、闭包等
• Distance 使用节点最短路径时距根节点root的距离
• Shallow Size 对象自身占用内存
• Retained Size 能释放的内存大小（保留大小）

4. Recoder面板（页面操作问题）

Recoder面板，主要可以记录页面交互过程，可用来做用户操作回放，排查页面操作相关问题。

5. 任务管理器（页面占用内存问题）

Chrome 任务管理器能够显示每个页面占用内存空间以及进程信息，可以辅助排查页面会话打开内存占用问题。

资源打包分析工具（webpack）

1. speed-measure-webpack-plugin 打包测速分析

使用speed-measure-webpack-plugin分析打包时每个loader和plugin执行耗时情况，用来打包测速分析。

2. webpack-bundle-analyse 包体积分析

使用 webpack-bundle-analyzer 分析打包后生成Bundle的每个模块体积大小。

相关专栏文章：

1. 【前端工程化-性能优化】性能优化系列之用户体验（概要篇）
2. 【前端工程化-性能优化】性能优化系列之用户体验的问题分析与定位
3. 【前端工程化-性能优化】性能优化系列之用户体验的优化方案（网络层面）
4. 【前端工程化-性能优化】性能优化系列之用户体验的优化方案（渲染层面）
5. 【前端工程化-性能优化】性能优化系列之用户体验的应用案例