使用合适的CSS优化界面：translate和top/left的比较

来源：互联网发布：java excel 合并编辑：程序博客网时间：2024/06/04 19:35

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

阅读全文

0 0