Guidelines for translate
top/left花了大量的时间去绘制每一帧。所有的css包括box-shdow都是在CPU上计算的。在translate版本中,却让这个macbook在自己新的图层在GPU中得到提升。此时此元素macboox是在自己单独的一层上,任何2D transform,3D transform或者opacity的变化都可以完全的使用GPU,GPU可以保持非常快并且可以给我们提供非常快的帧速率。
Guidelines for animation
1. 尽可能的使用CSS 关键帧动画或者CSS transition。浏览器可以优化大量绘制和组合的时间。2. 如果一定使用基于JS的动画,尽量使用requestAnimationFrame。尽量不要使用setTimeout, setInterval。
3. 尽量不要在每一帧上改变inline元素,浏览器可以在多方面优化css中声明式动画。
4. 使用2D transforms来代替pos:abs将会显著的提高FPS(每秒传输帧数),因为2D transform有更少的绘制时间和更流畅的动画。
5. 通过Timeline Frams模式来观测什么让你变慢
6. 在chroms://flags中打开“
合成渲染层边框”,帮助你看到哪些元素正在被GPU render