何为前端性能优化？
在这个是个前端就大谈特谈性能优化的时代，能否用一句话来概括前端的性能呢。
那就是：
前端性能就是网页打开的更快，用户用的更爽。
性能优化的指标
要把性能优化好，需要有指标来衡量，这些指标不仅仅是网页打开的速度提升了XXX秒，在业界是有相应的模型和分析工具的。
谷歌的RAIL模型
-
Response简单理解就是，网页应该快速响应。
-
Animation合理地动画，每一帧动画要 在16毫秒内完成，才能达到60FPS
由于人的视网膜的感知达到60fps已经流畅。（1000ms/60 ~= 16.6 ms）。 -
IDLE最大化空闲时间。把能再50ms内响应用户的输入作为目标。
-
LOAD尽最大可能减少页面记载时间。
用户对页面的加载时长是有忍耐极限的。
基于用户体验的性能指标
FCP (First Content Paint)
首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。对于该指标，"内容"指的是文本、图像（包括背景图像）、<svg>元素或非白色的<canvas>元素。
您会注意到，虽然部分内容已完成渲染，但并非所有内容都已经完成渲染。
为了提供良好的用户体验，网站应该努力将首次内容绘制控制在1.8 秒或以内。
实测工具 #
Largest Contentful Paint 最大内容绘制 (LCP)
最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。
网站应该努力将最大内容绘制控制在2.5 秒或以内。
下面两个图展示 FCP 和 LCP的关系
LCP 主要受四个因素影响：
- 缓慢的服务器响应速度
- JavaScript 和 CSS 渲染阻塞
- 资源加载时间
- 客户端渲染
First Input Delay 首次输入延迟 (FID)
FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。
首次输入延迟设控制在100 毫秒或以内
下面是网页开始加载的时间轴
在渲染完成后，用户开始交互时的时间轴
Time to Interactive 可交互时间 (TTI)
TTI 指标测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
如需根据网页的性能跟踪计算 TTI，请执行以下步骤：
- 先进行First Contentful Paint 首次内容绘制 (FCP)。
- 沿时间轴正向搜索时长至少为 5 秒的安静窗口，其中，安静窗口的定义为：没有长任务且不超过两个正在处理的网络 GET 请求。
- 沿时间轴反向搜索安静窗口之前的最后一个长任务，如果没有找到长任务，则在 FCP 步骤停止执行。
- TTI 是安静窗口之前最后一个长任务的结束时间（如果没有找到长任务，则与 FCP 值相同）。
性能优化方案
根据可能影响性能的点，可以从以下维度展开性能优化。
请求和响应优化
- DNS解析
- HTTP缓存
- 客户端缓存
