帧与性能

人眼感觉不到卡顿的效果需要60帧，打游戏都知道为60fps。页面性能如果低于60fps，那么能明显感觉到。

60fps，即需要在1000ms中处理60次，处理一次的时长为1000/60 约16ms。但是浏览器还需要对每帧进行处理，所以留给我们的只有10-12ms。我们所做的操作就需要尽可能的快。

那么如何保证我们的代码能达到60fps呢，这里我们需要对每帧包含的内容有所了解，可以分为以下几个步骤：

1.javascript

2.style

3.layout

4.paint

5.composite

但是上面的5步不是必须的。如果更改width，height，margin-left等需要重新计算的样式时，则会经历3、4、5几个步骤；如果更改color，background等需要2、4、5步骤；如果用transform等，则只会触发步骤5。而layout又是其中比较耗时的。

我们看到的网页是由多个图层构成的，我们可以用transform3d，opcity等方法创建一个图层，在图层上面操作，这样避免影响到更多的元素，提升了性能