My-Notes

001.前端性能指标

8分钟阅读

性能衡量模型

Chrome 提出了 RAIL 性能衡量模型，以用户为中心的效果指标，RAIL 代表 Web 应用生命周期的四个不同方面：响应、动画、空闲和加载

性能指标分类

性能指标主要可以分类两类：

  • I/O 性能：如网络 I/O，包括 DNS 解析时间、TCP 握手时间、请求响应时间等
  • CPU 性能：页面加载/渲染/可交互。本文只针对第二类的性能指标进行分析

常见的性能指标

  • FP (First paint，首次绘制)：常常被用来衡量白屏时间。这个指标要注意的是首次绘制这个概念，一旦页面发生变化，也就是说和初始状态不同，哪怕是一个像素的变化，也算是首次绘制
  • FCP（First Contentful Paint，首次内容绘制）：衡量从网页开始加载到网页任何部分呈现在屏幕上所用的时间。对于该指标，“内容”指的是文本、图像（包括背景图像）、<svg> 元素或非白色的 <canvas> 元素
  • LCP（Largest Contentful Paint，最大内容绘制）：衡量从网页开始加载到屏幕上渲染最大的文本块或图片元素所用的时间
  • FID（First Input Delay，首次输入延迟）：衡量从用户首次与网站互动（点击链接、点按按钮或使用由 JavaScript 提供支持的自定义控件）到浏览器实际能够响应该互动的时间
  • INP（Interaction to Next Paint，与下次绘制的互动）：衡量与网页进行每次点按、点击或键盘交互的延迟时间，并根据互动次数选择该网页最差的互动延迟时间（或接近最高延迟时间）作为单个代表性值，以描述网页的整体响应速度
  • TTI（Time to Interactive，可交互时间）：衡量的是从网页开始加载到视觉呈现、其初始脚本（若有）已加载且能够快速可靠地响应用户输入的时间
  • TBT（Total Blocking Time，总阻塞时间）：测量 FCP 和 TTI 之间的总时间，在此期间，主线程处于屏蔽状态的时间够长，足以阻止输入响应
  • CLS（Cumulative Layout Shift，累计布局偏移）：衡量从页面开始加载到其生命周期状态更改为隐藏之间发生的所有意外布局偏移的累计得分
  • TTFB（Time to First Byte，首字节时间）：测量网络使用资源的第一个字节响应用户请求所需的时间

最简单的，一般前端应用都会关心以下几个指标：

  1. FCP/LCP：该指标影响内容呈现给用户的体验，对页面跳出率影响最大
  2. FID/INP：该指标影响用户与网页交互的体验，对功能转化率和网页留存率影响较大
  3. TTI：该指标也为前端网页常用指标，页面可交互即用户可进行操作了

核心网页指标

LCP（最大内容绘制）

视口内可见的最大图片或文本块的呈现时间（相对于用户首次导航到页面的时间）

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

FID（首次输入延迟）

从用户首次与网页互动（即，点击链接、点按按钮或使用由 JavaScript 提供支持的自定义控件）到浏览器能够实际开始处理事件处理脚本以响应该互动的时间

new PerformanceObserver((entryList) => {  
  for (const entry of entryList.getEntries()) {  
    const delay = entry.processingStart - entry.startTime;  
    console.log('FID candidate:', delay, entry);  
  }  
}).observe({type: 'first-input', buffered: true});

CLS（累计布局偏移）

许多网站都面临布局不稳定的问题：DOM 元素由于内容异步加载而发生移动

用来衡量在网页的整个生命周期内发生的每次意外布局偏移的最大突发布局偏移分数

addEventListener("load", () => {  
    let DCLS = 0;  
    new PerformanceObserver((list) => {  
        list.getEntries().forEach((entry) => {  
            if (entry.hadRecentInput)  
                return;  // Ignore shifts after recent input.  
            DCLS += entry.value;  
        });  
    }).observe({type: "layout-shift", buffered: true});  
});

布局偏移分数是影响比例和距离比例的乘积：layout shift score = impact fraction * distance fraction

解决方案

PageSpeed Insights (PSI)

除了这些简单的指标外，要如何建立起对网页完整的性能指标呢？一套成熟又完善的解决方案为 Google 的 PageSpeed Insights (PSI)

PageSpeed Insights (PSI) 是一项免费的 Google 服务，可报告网页在移动设备和桌面设备上的用户体验，并提供关于如何改进网页的建议

Lighthouse

Google 的另外一个服务 —— Lighthouse

PageSpeed InsightsLighthouse
如何访问https://pagespeed.web.dev/（浏览器访问；无需登录）Google Chrome 浏览器扩展（推荐非开发人员使用）
Chrome DevTools
Node CLI 工具
Lighthouse CI
数据来源Chrome 用户体验报告（真实数据）
Lighthouse API（模拟实验室数据）		Lighthouse API
评估一次一页一次一页或一次多页
指标核心网络生命、页面速度性能指标（首次内容绘制、速度指数、最大内容绘制、交互时间、总阻塞时间、累积布局偏移）性能（包括页面速度指标）、可访问性、最佳实践、SEO、渐进式 Web 应用程序（如果适用）
建议标有 Opportunities and Diagnostics 的部分提供了提高页面速度的具体建议标有 Opportunities and Diagnostics 的部分提供了提高页面速度的具体建议。堆栈包可用于定制改进建议

web-vitals JavaScript 库

web-vitals JavaScript 库使用 PerformanceObserver，用于测量真实用户的所有 Web Vitals 指标，其方式准确匹配 Chrome 的测量方式，提供了上述提到的各种指标数据：CLS、FID、LCP、INP、FCP、TTFB

反向链接

关系图谱