前端的性能优化记录

• 减少DOM操作

  1. 最小化DOM访问次数，尽量缓存访问DOM的样式信息，避免过度触发回流。

  2. 如果在一个局部方法中需要多次访问同一个dom，则先暂存它的引用。

• 采用更优的API替代消费高的api，转换优化消费高的集合

  1. 用querySelectorAll()替代getElementByXX()。

  2. 开启动画的GPU加速，把渲染计算交给GPU。

  3. 少用HTML集合（类数组）来遍历，因为集合遍历比真数组遍历耗费更高。

  4. 用事件委托来减少事件处理器的数量。

• 减少重排

  1. 避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性

  2. 实现元素的动画，它的position属性，最好是设为absoulte或fixed，这样不会影响其他元素的布局

  3. 动画实现的速度的选择。比如实现一个动画，以1个像素为单位移动这样最平滑，但是reflow就会过于频繁，大量消耗CPU资源，如果以3个像素为单位移动则会好很多。

  4. 不要使用table布局，因为table中某个元素旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围

• css及动画处理

  1. 少用css表达式

  2. 减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；

  3. 动画尽量使用在绝对定位或固定定位的元素上；

  4. 隐藏在屏幕外，或在页面滚动时，尽量停止动画；