## **性能优化** 我们知道操作DOM是一个高成本的操作，不仅是因为本身js与DOM的链接访问，还包括操作DOM后悔引起一连串的连锁反应（重排），因此，从性能优化角度，我们可以从以下几个方面着手： * 减少DOM操作 * 最小化DOM访问次数，尽量缓存访问DOM的样式信息，避免过度触发回流。 * 如果在一个局部方法中需要多次访问同一个dom，则先暂存它的引用。 * 采用更优的API替代消费高的api，转换优化消费高的集合 * 用querySelectorAll()替代getElementByXX()。 * 开启动画的GPU加速，把渲染计算交给GPU。 * 少用HTML集合（类数组）来遍历，因为集合遍历比真数组遍历耗费更高。 * 用事件委托来减少事件处理器的数量。 * 减少重排 * 避免设置大量的style属性，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性 * 实现元素的动画，它的position属性，最好是设为absoulte或fixed，这样不会影响其他元素的布局 * 动画实现的速度的选择。比如实现一个动画，以1个像素为单位移动这样最平滑，但是reflow就会过于频繁，大量消耗CPU资源，如果以3个像素为单位移动则会好很多。 * 不要使用table布局，因为table中某个元素旦触发了reflow，那么整个table的元素都会触发reflow。那么在不得已使用table的场合，可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围 * css及动画处理 * 少用css表达式 * 减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画； * 动画尽量使用在绝对定位或固定定位的元素上； * 隐藏在屏幕外，或在页面滚动时，尽量停止动画；