性能优化术语
响应时间
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分析工具