前端面试题系列文章：
【12】「2023」性能优化相关知识点
【13】「2023」H5相关知识点
X-Mind原图地址：
RAIL模型
RAIL是一种以用户为中心的性能模型，它提供了一种考虑性能的结构。该模型将用户体验分解到按钮操作（比如：点击、滚动、加载）中，帮助您为每个操作定义性能目标。
RAIL代表Web应用生命周期的四个不同方面：响应、动画、空闲、加载。用户对这些上下文分别有不同的性能期望。
响应（Response）：在50毫秒内处理事件
在 50 毫秒内响应用户输入事件，让用户感觉交互是即时的。
动画（Animation）：在10毫秒内生成一帧
在 10 毫秒或更短的时间内生成动画的每一帧。从技术上来讲，每帧的最大预算为 16 毫秒（1000 毫秒/每秒 60 帧≈16 毫秒），但是，浏览器需要大约 6 毫秒来渲染一帧，因此，准则为每帧 10 毫秒。
空闲（Idle）：最大限度增加空闲时间
最大限度增加空闲时间以提高页面在 50 毫秒内响应用户输入的几率。
加载（Load）：在5秒内交付内容并实现可交互
当页面加载缓慢时，用户注意力会分散，他们会认为任务已中断。
用户体验指标
FP&FCP
- FP：首次绘制，FP（First Paint），当浏览器开始绘制内容到屏幕上的时候，只要在视觉上开始发生变化，无论是什么内容触发的视觉变化，在这一刻，这个时间点，叫做FP。
- FCP：首次内容绘制，FCP（First Contentful Paint）：这个指标用于记录页面首次绘制文本、图片、非空白Canvas或SVG的时间。
这两个指标看起来大同小异，但是FP的发生时间一定小于等于FCP。比如说页面的背景色是灰色的，那么在显示灰色背景时就记录下了 FP 指标。但是此DOM内容还没开始绘制，可能需要文件下载、解析等过程，只有当DOM内容发生变化才会触发，比如说渲染出一段文字，此时就会记录下FCP的时间。
下图是官方推荐的时间区间，也就是说FCP在1.8秒内触发的话就算体验优秀
LCP
最大绘制内容，LCP（Largest Contentful Paint），用于记录视窗内最大的元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生变化。另外该指标会在用户第一次交互后停止记录。
下图是官方推荐的时间区间，在 2.5 秒内表示体验优秀。
TTI
TTI（Time to Interactive）是衡量一个页面完成变成可交互状态的时间，当一个页面满足以下几个条件时可以认为该页面是完全可交互的：
-
从FCP指标后开始计算，保证已经有内容被渲染出来。
-
大多数的事件已经挂载在DOM上，完成注册。
-
此时主线程已经达到“流畅”的程度，主线程的任务均不超过 50 毫秒。
上图是 FCP、TTI、FID 三个指标的关系
下图是官方推荐的时间区间，在3.8秒内表示优秀
FID
FID（First Input Delay）译为首次输入延迟。顾名思义，FID指的是用户首次与产品进行交互时，我们产品可以在多长时间给出反馈。
TTI可以告诉我们网页什么时候可以开始流畅地响应用户的交互，但是如果用户在TTI的时间内，没有与网页产生交互，那么TTI其实是影响不到用户的，TTI是不需要用户参与的指标，但如果我们真的想知道TTI对用户的影响，我们需要FID。不同的用户可能会在TTI之前开始与网页产生交互，也可能在TTI之后才与网页产生交互。所以对于不同的用户它的FID是不同的。如果在TTI之前用户就已经与网页产生了交互，那么它的FID时间就比较长，而如果在TTI之后才第一次与网页产生交互，那么他的FID时间就短。
TBT
阻塞总时间，TBT（Total Blocking Time）汇总所有加载过程中阻塞用户操作的时长，在FCP和TTI之间任何long task中阻塞部分都会被汇总。
来个例子说明一下:
上图，有三个长任务（执行时间大于50ms），两个短任务(执行时间小于50ms)。
所以对于上图的情况来说，TBT 总共等于 345ms。
这个指标的高低其实也影响了 TTI 的高低，或者说和长任务相关的几个指标都有关联性。
CLS
累计位移偏量,CLS（Cumulative Layout Shift），记录了页面上非预期的位移波动。
大家想必遇到过这类情况：页面渲染过程中突然插入一张巨大的图片或者说点击了某个按钮突然动态插入了一块内容等等相当影响用户体验的网站。这个指标就是为这种情况而生的，计算方式为：位移影响的面积 * 位移距离。
以上图为例，文本移动了 25% 的屏幕高度距离（位移距离），位移前后影响了 75% 的屏幕高度面积（位移影响的面积），那么 CLS 为 0.25 * 0.75 = 0.1875。
CLS 推荐值为低于 0.1，越低说明页面跳来跳去的情况就越少，用户体验越好。毕竟很少有人喜欢阅读或者交互过程中网页突然动态插入 DOM 的情况，比如说插入广告。
如何获取指标
Chrome DevTools - Lighthouse
新版的Chrome原生支持Lighthouse
Chrome DevTools - Performance
打开 Performance 即可快速获取如下指标
web-vitals 库
官方出品，你可以通过安装 web-vitals 包来获取如下指标
import {getCLS, getFID, getLCP} from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
如何优化指标
静态资源优化
- JS、CSS在编译打包的时候通过Tree Shaking、压缩、合并代码等方式减少数量、体积
- 服务器端开启Gzip进一步压缩文件
- 图片文件在使用之前先用TinyPng等工具压缩一下
dns-prefetch预解析DNS的IP地址preconnect提前进行IP解析、TCP握手、TLS握手- 资源按需加载
- 使用Webp格式的图片
网络层面优化
- Http2
- CDN
- 浏览器缓存
代码编写习惯
- CSS放在文件头部、JavaScript文件放在底部
- 使用事件委托
- 使用flexbox布局而不是较早的布局模型
- 减少重排重绘
- 按需加载，选择Tree Sharking的库（Lodash、Lodash-es）
体验优化
- 加上Loading、骨架屏减少用户的焦虑感
