web性能指标
RAIL性能模型
基于用户体验的核心指标
FCP(First Contentful Paint) 首次内容绘制
LCP(Largest Contentful Paint) 最大内容绘制
FID(First Input Delay) 首次输入延迟
TTI(Time to Interactive) 可持续交互时间
TBT(Total Block Time) 总阻塞时间
CLS(Cumulative Layout Shift) 累计布局偏移
Speed Index 速度指数
新一代性能指标：Web Vitals
RAIL性能模型（Response、Animation、Idle、Load）
Google Chrome团队于提出的性能模型，用于提升浏览器用户体验和性能
响应（Response）：尽快可能在100ms内响应用户
比如在点击按钮向后台发起某项业务处理请求时，首先反馈给用户开始处理的提示，然后在处理完成的回调后反馈完成的提示
动画（Animation）：每一帧以10ms进行渲染，保持动画效果一致，避免卡顿空闲时间（Idle）：当使用js主线程时，应该把任务划分到执行时间小于50ms的片段中去，释放线程用于用户交互
利用浏览器空闲时间处理可延迟的任务，减少预加载的数据大小，保证网站或应用快速完成加载
加载（Load）：<5s加载网站并进行交互
在5s内完成加载并渲染出页面的要求，并非完成所有页面资源的加载。对于非关键资源的加载，延迟到浏览器空闲时再进行，例如渐进式优化策略，图片懒加载、代码拆分等优化手段
基于用户体验的核心指标
Google Chrome团队在web.dev提出
FCP(First Contentful Paint) 首次内容绘制
浏览器首次绘制来自DOM的内容的时间，内容必须是文本、图片（包含背景图）、非白色的canvas或SVG，包括带有正在加载中的web字体的文本
速度指标
优化方案
First Contentful Paint (FCP)This post introduces the First Contentful Paint (FCP) metric and explains how to measure ithttps://web.dev/fcp/#how-to-improve-fcp
LCP(Largest Contentful Paint) 最大内容绘制
可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户可见时间（2.5s）。
LCP考虑的元素：
<img>元素、<image>元素内的<svg>元素、<video>元素（封面图）、通过[url()]函数加载背景图片的元素、包含文本节点或其他内联文本元素子级的块级元素
第一个例子中，Instagramlogo相对较早地加载，即使逐渐显示其他内容，它仍然是最大的元素。在Instagramlogo第一帧中，一开始没有绿色框，是因为它是一个<svg>元素，<svg>元素当前不被视为LCP候选对象。
Google搜索结果页面示例中，最大的元素是一段文本，该文本在任何图像加载完成之前显示，它始终是最大的元素。
速度指标
优化方案
Optimize Largest Contentful PaintA step-by-step guide on how to break down LCP and identify key areas to improve.https://web.dev/optimize-lcp/
FID(First Input Delay) 首次输入延迟
从用户第一次与页面交互到浏览器能够响应交互的时间
输入延迟是引入浏览器忙于解析和执行应用程序加载的大量计算JavaScript。
第一次输入延迟通常发生在第一次内容绘制（FCP）和可持续交互时间（TTI）之间，这时页面已经呈现了一些内容，但还不能进行可靠地交互。
浏览器接收到用户输入操作时，主线程正在忙于执行一个耗时比较长的任务，只有当这个任务执行完成后，浏览器才能响应用户的输入操作，它必须等待的时间===该用户的FID值。
例如，以下所有的HTML元素都需要在响应用户交互之间等待主线程上正在进行的任务完成：
文本输入框，复选框和单选按钮<input>、<textarea>选择下拉菜单<select>链接<a>
速度指标
优化方案
First Input Delay (FID)This post introduces the First Input Delay (FID) metric and explains how to measure ithttps://web.dev/fid/#how-to-imporve-fidOptimize First Input Delayhttps://web.dev/optimize-fid/
TTI(Time to Interactive) 可持续交互时间
网页第一次完全达到可交互状态的时间点，浏览器可以持续性地响应用户的输入。完全达到可交互状态的时间点是在最后一个长任务完成的时间，并在随后的5s内网络和主线程是空闲的。
速度指标
优化方案
Time to Interactive (TTI)https://web.dev/tti/#how-to-improve-tti
TBT(Total Block Time) 总阻塞时间
度量了FCP和TTI之间的总时间，在该时间范围内，主线程被阻塞足够长的时间以防止输入响应。我们说主线程“被阻止”是因为浏览器无法中断正在进行的任务，如果用户在较长的任务中间与页面进行交互，则浏览器必须等待任务完成才能响应。给定的长任务的阻止时间是其持续时间超过50ms，页面的总阻塞时间=FCP+TTI之间发生的每个长任务的阻塞时间的总和。
例如考虑页面加载期间浏览器主线程：
上面时间轴有5个任务，其中有3个持续时间超过50ms的长任务，下图显示了每个长任务的阻塞时间：
因此，虽然在主线程上运行任务话花费总时间为560ms，但只有345ms被视为阻塞时间。
速度指标
优化方案
Total Blocking Time (TBT)https://web.dev/tbt/#how-to-improve-tbt
CLS(Cumulative Layout Shift) 累计布局偏移
CLS会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，它是一种保证页面的视觉稳定性，从而提高用户体验的指标方案。
页面内容的意外移动通常是由于异步加载资源或将DOM元素动态添加到现有内容上方的页面而发生的。可以使用加载占位符使布局不变。
速度指标
优化方案
Cumulative Layout Shift (CLS)https://web.dev/cls/#how-to-improve-clsOptimize Cumulative Layout ShiftCumulative Layout Shift (CLS) is a metric that quantifies how often users experience sudden shifts in page content. In this guide, we'll cover optimizing common causes of CLS such as images and iframes without dimensions or dynamic content.https://web.dev/optimize-cls/
Speed Index 速度指数
页面可视区域中内容的填充速度的指标，可以通过计算页面可见区域内容显示的平均时间来衡量。
速度指标
优化方案
Speed Indexhttps://web.dev/speed-index/#how-to-improve-your-speed-index-score
新一代性能指标：Web Vitals
Google于5月5日提出Web Vitals 来衡量网站的用户体验-Core Web Vitals
Core Web Vitals是应用于所有Web页面的Web Vitals的子集。
加载性能（LCP）-显示最大内容元素所需的时间交互性（FID）-首次输入延迟时间视觉稳定性（CLS）-累积布局配置偏移
测量Web Vitals
性能测试工具，比如Lighthouse使用web-vitals库使用浏览器插件Web Vitals
