为什么CSS matrix3d渲染速度比CSS位置快？

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)

或只设置left position。

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

更新：

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

high performance animations on HTML5

Answer 1

这里有两个相关因素

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

请参阅html5 - high performance animations以获得更好的解释

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

transform: translateZ(0px);

它显然什么也没做，但这使得更加光明的人使用GPU并加速了这个过程。您可以尝试通过添加此行来测量左侧的更改，并查看性能是什么。