性能优化理解

一 性能优化分类：

1 资源加载优化：

• 控制图片大小/图片懒加载/资源压缩
• 减少http请求（节流）
• 代码高内聚低耦合
• 使用CDN加速资源加载

• 使用事件委托（使用事件委托可以节省内存）

2 代码执行层面优化：主要是动画性能优化；在前端实现动画有三种主流的方式:Canvas；CSS3；Dom

• • Reflow（回流）：浏览器要花时间去渲染，当它发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。
  • Repaint（重绘）：如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的repaint，重画某一部分。

• • 动画优化：requestAnimationFrame：作用就是让浏览器流畅的执行动画效果；专门用来实现动画效果的api。（https://juejin.im/post/5a82f0626fb9a06358657c9c）：
  • 硬件加速：GPU在硬件层面，对于图像处理，通常用硬件会更快，因为GPU使用图像对高度并行浮点运算做了优化。CSS 中的以下几个属性能触发硬件（GPU）加速：transform；opacity；filter；will-change。
  • 利用Web Worker对大量计算数据进行优化。

 

三 常用优化总结：https://www.jianshu.com/p/fe32ef31deed