性能优化清单
· 阅读需 2 分钟
加载优化
请求
- 减少 Cookie 携带的数据大小
- 避免重定向
- 避免短时间内多次请求
- 减少 HTTP 请求
- 避免请求的多次往返
- 单个文件大小有没有超过 500k
- 将小型工具合并为一个包
- 单个文件有没有小于 4k
- 请求预加载
静态文件部署
- 静态文件 CDN
- 压缩图像
- 小型资源（小于 4k 直接内联到网页中减少额外请求）
- 压缩代码
- 提升首屏加载速度
- 按需加载
- 文件缓存
- 启用 gzip
- 预加载
- 单独的静态文件（图像，MP4）服务器
CSS
- CSS 写在头部
- 优化动画，利用 GPU 加速
- 避免行内 style
- 避免滥用 float
- 减少重绘和回流
开发
- 减少 DOM 节点
- 首页绘制时间（首页资源加载量）
- 图片资源懒加载
- 高频事件处理（防抖、节流）
- 根据等待时长给予动画或是进度条
- SPA 项目重构为 SSR 项目