前端性能优化方案——综合篇

CSS 性能优化

1. 内联首屏关键CSS（Critical CSS）
2. 异步加载CSS：使用 preload进行预加载
3. 文件压缩
4. 有选择地使用选择器，避免过多嵌套的选择，但要保证可读性
5. 减少计算属性：如box-shadow/border-radius/filter/透明度/:nth-child等。
6. 减少重排，避免重绘
7. 不使用@import

reference：
https://zhuanlan.zhihu.com/p/41136812

Vue 性能优化

• v-if 和 v-show 区分使用场景
  • v-if是真正的条件渲染，v-show简单的多，不管初始条件是什么总会被渲染出来
• computed 和 watch 区分使用场景
  • 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
  • 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
  • Vue.js 内部机制精准找到该条列表数据。当 state 更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。
  • v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性。
• 长列表性能优化
  • 可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。
• 事件的销毁
  • 在 beforeDestroy 中销毁自定义的事件
• 图片资源懒加载
  • 项目中使用 Vue 的 vue-lazyload 插件
• data的层级不要太深
  • 因为深度监听是一次性完成的，在响应式做监听的时候会造成做监听的深度比较多， 递归的次数多会造成页面较卡一些
• 使用 vue-loader 在开发环境做模板编译（预编译）

reference：
https://zhuanlan.zhihu.com/p/83180326

JavaScript 性能优化

性能优化原则

• 多使用内存、缓存或者其他方法（加载时间更快）
• 减少CPU使用量，减少网络加载耗时
• （适用于所有编程的性能优化——空间换时间）

让加载更快

• 减少代码资源体积，压缩代码（ gzip 压缩——> 1/3压缩）
• 减少访问次数：合并代码（减少访问次数），SSR 服务端渲染，缓存
• 使用更快的网络：CDN（根据区域来决定运营商的IP）

让渲染更快

• CSS 放在 head 中，JS 放在body的最下面
• 尽早开始执行 JS，用 DOMContentLoaded 触发
• 懒加载，（图片懒加载，上滑才加载更多）
• 对 DOM 查询进行缓存
• 对于频繁的 DOM 操作，合并到一起插入到 DOM 结构中
• 节流 throttle 防抖 debounce（体验更好）