帧与性能
人眼感觉不到卡顿的效果需要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等方法创建一个图层,在图层上面操作,这样避免影响到更多的元素,提升了性能