性能指标

RAIL性能模型：

Response、Animation、Idle、Load的首字母缩写 是由Google Chrome团队于2015年提出的性能模型，用于提升浏览器内的用户体验和性能

响应（Response）： 应该可能的快速的响应用户，应该在100ms内响应用户的输入
动画(Animation)： 在展示动画的时候，每一帧应该以10ms进行渲染，这样可以保持动画渲染的一致性，并且避免卡顿
空闲(Idle)： 当使用JavaScript主线程的时候，应该使任务划分到执行时间小于50ms的片段中去，这样可以释放进程进行用户交互（其实就是线程里最好不要有大量的占用或者消耗主线程时间的任务，如果有的话可以异步切片去执行）
加载(Load)： 首次加载应该小于5s的时间内加载完成，并可以进行用户交互，对于后续的加载，则是建议在2s内完成

基于用户性能体验的指标:

First Contentful Paint(FCP)：首次内容绘制， 浏览器首次绘制来自DOM的内容的时间(其实就是不包含js那些)，内容必须是文本、图片、非白色的Canvas或者SVG，也包正在加载的web字体
Largest Contentful Paint(LCP)：最大内容绘制(不是看到内容的大小，而是资源的文件大小)， 可视区域中最大的内容元素呈现到屏幕上的时间，用以估算页面的主要内容对用户可见时间；考虑的元素：img、image里的svg、video、包含文本节点之类，力争2.5s或更短的最大内容绘制
First Input Delay(FIP)：首次输入延迟，从用户第一次与页面交互(例如单击链接、点击按钮...)，到浏览器实际能够响应应该交互的时间；输入延迟是因为主线程正在忙于其他事情，所以不能响应用户；速度指标100ms内
Time to Interactive(TTI)：表示网页第一次到达完全可交互状态的时间点，浏览器已经可以持续性的响应用户的输入。最后一个长任务(Long Task)结束时间，且后续有5s空闲时间；速度指标：4s以内比较好
Total Block Time(TBT)：总阻塞时间，度量了FCP和TTI之间的总时间，在该时间内，主线程被阻塞足够长的时间以防止输入响应；所有Long Task超过50ms的时间总和就是TBT；速度指标300ms以内，超过600ms性能就不行
Cumulative Layout Shift(CLS)：累计布局偏移，CLS会测量在页面整个生命周期中发生的每个意外的布局移位的所有单独布局移位分数的总和，它是一种保证页面的视觉稳定性从而提升用户体验的指标方案；速度指标0.1s内，超过0.25s慢
Speed Index：速度指数 是一个表示页面可视区域中内容填充速度的指标，可以计算页面可见区域内容显示平均时间来衡量；速度指标4.3s，5.8s以上优化

Web Vitals(精简版的性能指标)

Google在2020年5月提出的新用户体验量化方式
Web Vatals给出的定义是一个良好的网站基本指标，过去衡量一个网站的好坏，需要使用的指标太多，Web Vatals可以简化指标的学习曲线
Google确定了三个主要衡量指标，即在所有类型网站中通用的Core Web Vatals；
Core Web Vatals是应用于所有页面的Web Vatals的子集，是其最重要的核心：

加载性能(LCP)：最大内容元素所需时间
交互性(FID)：首次输入延迟时间
页面内容的视觉稳定性(CLS)：累计布局位置偏移

性能测试

使用灯塔Lighthouse测试性能

Lighthouse直译过来是灯塔的意思，由Google开发并开源的一个web性能测试工具，会返回：

检测得分
各项性能指标时间
优化建议：常见优化建议

移除阻塞渲染资源
预连接所要请求源
降低服务器端响应时间
适当调整图片大小
移除未使用的css

诊断结果
已通过的性能

使用WebPageTest测试性能

在线的测试工具，返回结果跟Lighthouse测试性能差不多

使用Chrome Devtools测试性能

浏览器任务管理器：可以看到网页占用内存、cpu情况，过大就是代表你的网页存在较大进程，有问题
Network网络分析：可以看到网页中所有请求情况，资源大小、请求时间、时间线
Performance性能测试面板

前端性能优化