JavaScript动画性能优化

---

1.使用单个定时器

使用多个定时器会迅速增加CPU的占用率。如果想同时实现多个动画，应该尝试使用一个定时器控制他们。每个定时器会导致浏览器重绘一个或多个屏幕元素。显然，如果全部的动画元素只进行一次重绘，创建动画效果将会更加迅速和有效。

2.避免为DOM深层次的元素创建动画效果

元素在DOM树中的层次越深，其尺寸和位置所影响的元素就越多。这样的元素在创建动画效果时就要求浏览器执行更多的计算。在可能的情况下，尽量把要创建动画效果的元素直接附加到元素或比较高层的容器。

3.使用尽可能低的帧速率

不是所有动画都需要达到电影的品质，所以只要动画的品质处于能够接受的范围，就尽量增加延时的时间。