javascript - 为什么 CSS matrix3d 比 CSS position 渲染得更快？

Question

假设我想将一个元素从左边移动到右边，我可以这样做

 transform: translate3d(200px,0,0);
 /*or*/
 transform: translateX(200px);

或

 transform: matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,200,x,x,x)

或者只是设置左边的位置。

为什么 CSS matrix3d 渲染速度比仅设置位置 left/top 更快？

更新:

CSS animation of top/left vs transform in slow-mo.

high performance animations on HTML5

Answer 1

这里有两个相关的因素

1) 因为 left 可能会影响页面中的所有布局，所以它会强制重新计算样式和布局。转换不需要这一步，转换不会影响元素的邻居。

参见 html5 - high performance animations为了更好的解释

2) 因为大多数 3d 工作是由 GPU 而不是 CPU 处理的。 GPU 不仅可以更快地完成这项工作，还可以释放 CPU 以更好地处理其余工作。你会看到很多时候的风格

transform: translateZ(0px);

wich 显然什么都不做，但这会让兄弟使用 GPU 并加速这个过程。您可以尝试测量添加此行后左侧的变化，看看性能如何。