优化的三大部分
- 对于图片的优化
- 减少http请求
- 减小http请求的大小
启用Gzip压缩
图片优化
- 图片懒加载
- 懒加载的时候先使用默认图占位，加载完成后依次加载真实图片
- 使用base64格式的图片
- 使用webp格式的图片
- 小的背景图片合成（精灵图）
- 使用svg图片
- 前台在请求图片的时候直接带上宽高，服务器直接把处理好的图片发过来
- 对于分辨率比较高的图片，服务器先发送一个分辨率很低的模糊图片，等到用户点击大图，或者网络空闲的时候在把高清大图请求回来替换
减少http请求
- 路由懒加载
- 重要的页面使用kepp-live缓存
- 次要的页面预加载
- 加载的时候给用户一个动画效果
- 合并css，js文件
- 避免重复的资源请求
- 避免重定向
- 缓存请求回来的大文件
减小http请求体积
- 减小cookie的体积
- 尽量采用json的格式进行数据传输
插件优化
- 使用按需加载的方式
CSS优化
- 不使用空的选择器
div：{
}
- 动画效果使用转换工具直接转换为贝塞尔曲线和矩阵运算
- 减少选择器前面的前缀（选择器是从右向左查找的，前缀多，查询的时间多）
- 多用css3的动画，少用js动画（因为css3开启了硬件加速）
- 删除没用的html标签
js优化
- 缓存DOM节点
const _div = document.querySelector('div')
// 使用时直接用 _div
// 不要再使用的时候用document.querySelector('div')
-
避免使用eval和Function
-
减少重绘和回流
-
避免不必要的循环，合理使用break，countnue
-
如果页面中有视频和音频，进行不设置自动播放，当用户点击时在进行请求和播放
-
尽量减少闭包的使用，每次使用闭包都要留意是否有没有清理的内存
-
尽量避免一个个给dom绑定事件，采用性能更高的事件委托