前言
你还在为当面试官问你项目有什么难点的时候不知道说啥吗？那么就来看看这个前端性能系列文章：性能介绍 、性能定位 、性能优化 、性能上报。本文主要讲为什么要做性能优化，有哪些指标评估你网站的性能是否好坏，达到怎么样的指标才算ok。
什么是前端性能，为什么要做性能优化
前端性能是指网站或应用程序在用户端（即浏览器端）的加载速度、响应时间、交互流畅度等方面的表现。一个网站的性能好坏决定了用户的留存。如果你的网站很久才显示，操作很卡顿，用户将不再使用你的网站。那么性能优化能带给我们什么呢？
- pinterest 重建了他们的页面以实现性能，使感知等待时间减少了 40％ ，从而将搜索引擎流量和注册量提高了 15％
- BBC 发现，他们在网站加载的每一秒钟 内就会损失 10％ 的用户
- DoubleClick by Google 发现，如果网页加载时间超过 3 秒，则会有 53％ 的用户放弃移动网站的访问。
上面几个例子告诉我们性能优化可以提高用户的体验和网站的传播，从而能增加用户的留存，提高网站的转化率，提高搜索的排名，减少客户的投诉，提升工作绩效。
如何判断一个网站性能，常用的性能指标有哪些
2-5-8原则
| 网站响应速度 | 用户体验 |
|---|---|
| 小于2s | 感觉很快 |
| 2 - 5s | 感觉还可以 |
| 5 - 8s | 感觉很慢，但还能接受 |
| 超过8s | 感觉性能很糟糕或者认为网站已经失去响应，从而选择离开或发起二次请求 |
根据2-5-8原则我们得到结论，我们的网站最优要做到秒开(即1s内响应)，最差也要保证在2s内响应
RAIL性能模型
RAIL 是Response，Animation，Idle和Load的首字母缩写，用于提升浏览器的用户体验和性能。以用户为中心，使用户满意，无需在任何特定设备上都能运行很快。
| 标题 | 说明 |
|---|---|
| Response | 在 100毫秒内完成由用户输入发起的转换，让用户感觉交互是即时的 |
| Animation | 在 10 毫秒或更短的时间内生成动画的每一帧 |
| Idle | 最大限度增加空闲时间 |
| Load | 应该在小于1s的时间内加载完成你的网站，并可以进行用户交互,如果在3G网络下，应在 5s内 |
更详细介绍见： web.dev/i18n/zh/rai...
常见网站性能指标
FP 白屏（First Paint）
从页面开始加载到浏览器中检测到任何渲染的时间。如背景改变，样式应用等。白屏时间过长，会让用户觉得我们的网站不可用或可用性差
FCP 首屏 (First Contentful Paint)
从页面开始加载到页面首次绘制内容的时间。内容必须是文本、图片(包含背景图）、非白色的 canvas 或 svg,也包括带有正在加载中的 Web 字体的文本。
| FCP时间 | 性能 |
|---|---|
| 0--1.8 秒 | 快 |
| 1.8--3 秒 | 中等 |
| 超过 3 秒 | 慢 |
LCP 最大内容绘制 (Largest Contentful Paint)
从页面开始加载到可视区域内可见的最大图像或文本块完成渲染的时间。如banner图，视屏等。 是测量感知加载速度（页面在屏幕上加载并渲染出所有视觉元素的速度）的一个以用户为中心的重要指标。但FCP以及下面的FMP、SI这些指标过于复杂，而且很难解释，也经常出错，没办法确定主要内容什么时候加载完。
| LCP时间 | 性能 |
|---|---|
| 0-2.5 秒 | 快 |
| 2.5-4 秒 | 中等 |
| 超过 4 秒 | 慢 |
FMP 首页有效绘制 (First Meaningful Paint)
表示页面的"主要内容"开始出现在屏幕上的时间，这项指标因页面逻辑而异，因此上不存在任何规范，以前是我们测量用户加载体验的主要指标，但是最好的情况也只有77%的准确率，在lighthouse6.0(下文有讲解) 的时候废弃掉了这个指标，取而代之的是 LCP 这个指标。
| FMP时间 | 性能 |
|---|---|
| 0-2 秒 | 快 |
| 2-4 秒 | 中等 |
| 超过 4 秒 | 慢 |
SI 速度指数 (Speed Index)
衡量内容在页面加载过程中可视化显示的速度。
长任务 (Long Task)
浏览器执行耗时操作超过50ms的任务，会占用主线程并使页面对用户输入无响应，使用户感到卡顿（50ms 阈值是RAIL模型建议您在50毫秒内处理用户输入事件，以确保在 100 毫秒内做出可见响应。）
TTI 可交互时间 (Time To Internative)
测量页面从开始到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。(具体见下图)
| TTI时间 | 性能 |
|---|---|
| 0--3.8 秒 | 快 |
| 3.9--7.3 秒 | 中等 |
| 超过 7.3 秒 | 慢 |
- 先进行First Contentful Paint 首次内容绘制 (FCP)。
- 沿时间轴正向搜索时长至少为 5 秒的安静窗口，其中，
安静窗口的定义为：没有长任务且不超过两个正在处理的网络 GET 请求。 - 沿时间轴反向搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在 FCP 步骤停止执行。
- TTI 是安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与 FCP 值相同）。
TBT 总阻塞时间 (Total Blocking Time)
测量FCP与TTI之间发生的每个长任务的阻塞时间总和。(具体见下图)
| TBT时间 | 性能 |
|---|---|
| 0--200 毫秒 | 快 |
| 200-600 毫秒 | 中等 |
| 超过 600 毫秒 | 慢 |
上图主线程上运行任务的总时间为 560 毫秒，但其中红色的为阻塞时间 总共为 345 毫秒。
FID 首次延迟输入 (First Input Delay)
测量从用户第一次与您的网站交互(例如点击连接，点击按钮)，直到浏览器实际能够对交互作出响应所经过的时间。(具体见下图)
| FID时间 | 性能 |
|---|---|
| 0-130 毫秒 | 快 |
| 130-250 毫秒 | 中等 |
| 超过 250 毫秒 | 慢 |
CLS 累积布局偏移 (Cumulative Layout Shift)
CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数(布局偏移分数 = 影响分数 * 距离分数)。如下图
这一个元素在一帧中占据了一半的可视区域。接着，在下一帧中，元素下移了可视区域高度的 25%。红色虚线矩形框表示两帧中元素的可见区域集合，该集合占总可视区域的 75%，因此其影响分数为0.75。这一个元素位移距离为可视区域高度的 25%（上面中蓝色箭头的位置），因此距离分数为 0.25，那么局偏移分数就是是0.75 * 0.25 = 0.1875
DCL（DOMContentLoaded）
当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式，图像和子框架的完成加载。
L（onLoaded）
当依赖的资源，全部加载完毕之后才会触发
更详细介绍 FCP、LCP、FID、TTI及优化建议等见：web.dev/metrics/
结语
本文到这就结束了，希望能对各位有所帮助，剩下的3篇会尽快发布，溜了溜了
