一、资源加载优化
1、减少资源大小
- 代码压缩——webpack
- Gzip
- 图片压缩:京东发明的DPG格式和谷歌发明的webp格式
2、减少请求次数
- 强缓存expires和cache-control
- 使用base64对小图转码
- localStorage
- 精灵图
- 使用splitChunk提取公共代码
3、加快请求速度
- 协商缓存:last-modified和etag
- CDN部署静态资源
- DNS prefetch:将DNS保存到系统缓存中
- HTTP2:头信息压缩、多路复用、主动推流
4、优化加载时机
- Vue组件懒加载
- 图片懒加载
- 组件库按需加载
二、页面渲染优化
1、优化html代码
- css代码外链放在顶部(不阻塞DOM解析),js代码外链放在底部(阻塞DOM解析,加了defer/async不会)
2、优化css、js代码
- 不要使用代价高昂的属性,比如calc和filter
- 减少重绘和回流
- 通过修改类名批量修改属性
- 下线操作:display设置为none再修改属性
- offset、scroll、client等属性读写分离
- position使用absolute和fixed使元素脱标
- 使用css3硬件加速,使transform、opacity、filters等动画不会引起重绘和回流
- ....
- 使用web worker在后台运行复杂的js代码
- 降低css选择器的复杂度
- 优化长列表(使用虚拟列表)
- 滚动事件等使用防抖和节流优化