性能优化术语

响应时间
TTFB 从请求到响应第一个字节的时间

白屏时间
FP 从请求到渲染第一个像素点的时间，白屏时间
FCP 从请求到页面任意部分完成渲染的时间，灰屏时间
LCP 从请求到页面最大内容完成绘制的时间 （通常是指元素在用户可视区域内的可见大小）

交互时间
TTI 最早可交互时间

解析时间
DCL DOMContentLoaded 事件被触发时间，通常是 HTML文档被完全加载和解析完成之后，无需等待样式，图像和子框架的完成加载的时间

优化目标

1. 白屏时间

分为几个方面

通过打包分析工具，webpack，vite都有对应的分析插件，分析打包的包体积和分布

1.1 减小体积

tree-shaking
大包换小包, momentjs换成dayjs，lodash按需加载
大包拆成几个小包，并行加载

1.2 异步加载

非首屏使用的包，全部异步加载
非必须使用的，按需加载
路由页面文件，按需加载
大的图表文件，例如echarts，异步加载
图片文件懒加载

1.3 关键路径优化

服务端渲染
内联关键css
骨架屏

2. 卡顿优化

2.1 动画开启硬件加速
2.2 对象池，回收对象
2.3 动画使用requestAnimationFrame
2.4 动画由dom换成canvas
2.5 减少回流和重绘，通过chrome分析工具