1. 加载优化
- 路由懒加载
- 组件懒加载
- 组件按需引入
- 长列表虚拟滚动
- 将脚本移到页面底部
- 使用requestAnimationFrame制作动画
- 使用异步加载脚本或延长加载脚本,只有外链脚本才会触发async和defer
2.减少重绘和回流
- 使用transform和opacity替代position、width和height来进行动画。
- 使用will-change来提前告知浏览器某个属性将要发生变化。
- 减少不必要的DOM操作。
- 避免使用document.write
- 减少drawImage
- 尽量改变class而不是style，使用classList代替className
- 尽量避免操作DOM，可以先用
- 缓存.length的值：每次.length计算用一个变量保存值
3.图片渲染优化
- css写在头部，js写在尾部并异步
4.减少HTTP请求
- 合并和压缩CSS、JS和图像文件
- 使用CSS Sprites合并小图标
- 使用字体图标代替图像
5.使用缓存
- 利用浏览器缓存机制，设置合适的缓存头。
- 使用Service Workers实现离线缓存。
6.使用CDN
- 将静态资源部署到全球CDN上，减少网络延迟。
