假设我想将一个元素从左边移动到右边,我可以这样做
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 更快?
更新:
最佳答案
这里有两个相关的因素
1) 因为 left 可能会影响页面中的所有布局,所以它会强制重新计算样式和布局。转换不需要这一步,转换不会影响元素的邻居。
参见 html5 - high performance animations为了更好的解释
2) 因为大多数 3d 工作是由 GPU 而不是 CPU 处理的。 GPU 不仅可以更快地完成这项工作,还可以释放 CPU 以更好地处理其余工作。你会看到很多时候的风格
transform: translateZ(0px);
wich 显然什么都不做,但这会让兄弟使用 GPU 并加速这个过程。您可以尝试测量添加此行后左侧的变化,看看性能如何。
关于javascript - 为什么 CSS matrix3d 比 CSS position 渲染得更快?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23573621/