web性能指标
Google Chrome该团队于2015年提出的性能模型用于改善浏览器的用户体验和性能
- 响应（Response）：尽快可能在响应用户
例如，当点击按钮向后台发出业务处理请求时，首先反馈给用户开始处理的提示，然后在处理完成的回调后反馈完成的提示
- 动画（Animation）：每一帧以渲染，保持动画效果一致，避免卡顿
- 空闲时间（Idle）：当使用js主线程应将任务划分为执行时间小于释放线程用于用户交互
利用浏览器的空闲时间处理可延迟的任务，减少预加载的数据大小，确保网站或应用程序快速加载
- 加载（Load）：加载网站并进行交互
在5s内完成加载并渲染出页面的要求，并非完成所有页面资源的加载。对于非关键资源的加载，延迟到浏览器空闲时再进行，例如渐进式优化策略，图片懒加载、代码拆分等优化手段
Google Chrome团队在web.dev提出
来自浏览器的第一次绘制DOM内容的时间必须是文本、图片（包括背景图片）和非白色canvas或SVG，包括正在加载的内容web字体的文本
可视区域中最大的内容元素呈现在屏幕上的时间，以估计页面的主要内容对用户的可见时间(2.5s）。 <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/
从用户第一次与页面交互到浏览器响应交互时间
输入延迟是引入浏览器忙于分析和执行应用程序加载的大量计算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/
页面第一次完全达到交互状态的时间点，浏览器可以连续响应用户的输入。完全达到交互状态的时间点是在最后一个长任务中完成的，并在接下来的5个时间s内部网络和主线程是免费的。
Time to Interactive (TTI)https://web.dev/tti/#how-to-improve-tti
度量了FCP和TTI之间的总时间，在该时间范围内，主线程被阻塞足够长的时间以防止输入响应。我们说主线程“被阻止”是因为浏览器无法中断正在进行的任务，如果用户在较长的任务中间与页面进行交互，则浏览器必须等待任务完成才能响应。给定的长任务的阻止时间是其持续时间超过50ms，页面的总阻塞时间=FCP+TTI之间发生的每个长任务的阻塞时间的总和。
例如考虑页面加载期间浏览器主线程：
上面时间轴有5个任务，其中有3个持续时间超过50ms的长任务，下图显示了每个长任务的阻塞时间：
因此，虽然在主线程上运行任务话花费总时间为560ms，但只有345ms被视为阻塞时间。
Total Blocking Time (TBT)https://web.dev/tbt/#how-to-improve-tbt
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 Indexhttps://web.dev/speed-index/#how-to-improve-your-speed-index-score
Google于2020年5月5日提出 Web Vitals 来衡量网站的用户体验-Core Web Vitals
Core Web Vitals是应用于所有Web页面的Web Vitals的子集。
- 加载性能（LCP）-显示最大内容元素所需的时间
- 交互性（FID）-首次输入延迟时间
- 视觉稳定性（CLS）-累积布局配置偏移