笔记：前端性能的优化（总结）

优化的三大部分

• 对于图片的优化
• 减少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绑定事件，采用性能更高的事件委托