性能差距还是很大的特别是在移动设备上，因为大家都知道浏览器在处理这两种样式时的流水线不同。position更新进行 layout 重计算。而translate只需要对本元素的几何数据点做偏移就好了。不过性能最优的方式还是要为被拖拽的那个元素触发composite layer（可以叫它合成层），因为现在浏览器一般都是 合成化渲染，并且大部分 光栅化（就是把元素形状的几何数据描述变成像素描述的过程，可以理解成矢量变成位图）过程都是在CPU上进行的，如果不把被拖拽的那个元素触发成为 合成层 那么CPU就会重复的paint这个元素，这是不合理的(CPU paint的过程比较耗时)，所以应该让CPU尽量少的paint这个元素，最好只paint一次，之后的拖拽（也就是位移，甚至是旋转啊、缩放啊等这些仿射变换） 都可以直接交给GPU在合成（composited）的时候来做，这也就是所谓的硬件加速机制。合成过程就是把几个合成层（一个合成层可以是 一个元素或多个元素组合经过CPU 光栅化后得到的图片）根据各个层的几何顶点信息、矩阵描述、透明度、blend效果等信息使用GPU进行重新的光栅化渲染到一张直接投影到屏幕上的图片上（帧缓冲区 framebuffer），然而这里的光栅化是非常快的，不同于CPU的那个光栅化的过程。原因大致如下：一、因为这个时候的渲染只是把一张现成的位图合成到一起（就像纹理贴图，可以简单理解成像素值的简单计算和拷贝）。而不像CPU光栅化，它是将非常复杂的几何数据（是由浏览器分析dom的css样式所得到的）通过一系列复杂的逻辑计算后得到一个像素最后得到一张图片。二、因为GPU有非常多个处理单元在并行的处理这些简单的渲染，它的计算吞吐量是很大的。而CPU的处理单元非常少，做强逻辑的计算非常适合，但是做这种简单的加减乘除计算不如GPU快
性能差距还是很大的特别是在移动设备上，因为大家都知道浏览器在处理这两种样式时的流水线不同。position更新进行 layout 重计算。而translate只需要对本元素的几何数据点做偏移就好了。不过性能最优的方式还是要为被拖拽的那个元素触发composite layer（可以叫它合成层），因为现在浏览器一般都是 合成化渲染，并且大部分 光栅化（就是把元素形状的几何数据描述变成像素描述的过程，可以理解成矢量变成位图）过程都是在CPU上进行的，如果不把被拖拽的那个元素触发成为 合成层 那么CPU就会重复的paint这个元素，这是不合理的(CPU paint的过程比较耗时)，所以应该让CPU尽量少的paint这个元素，最好只paint一次，之后的拖拽（也就是位移，甚至是旋转啊、缩放啊等这些仿射变换） 都可以直接交给GPU在合成（composited）的时候来做，这也就是所谓的硬件加速机制。合成过程就是把几个合成层（一个合成层可以是 一个元素或多个元素组合经过CPU 光栅化后得到的图片）根据各个层的几何顶点信息、矩阵描述、透明度、blend效果等信息使用GPU进行重新的光栅化渲染到一张直接投影到屏幕上的图片上（帧缓冲区 framebuffer），然而这里的光栅化是非常快的，不同于CPU的那个光栅化的过程。原因大致如下：一、因为这个时候的渲染只是把一张现成的位图合成到一起（就像纹理贴图，可以简单理解成像素值的简单计算和拷贝）。而不像CPU光栅化，它是将非常复杂的几何数据（是由浏览器分析dom的css样式所得到的）通过一系列复杂的逻辑计算后得到一个像素最后得到一张图片。二、因为GPU有非常多个处理单元在并行的处理这些简单的渲染，它的计算吞吐量是很大的。而CPU的处理单元非常少，做强逻辑的计算非常适合，但是做这种简单的加减乘除计算不如GPU快
translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效，可以缩短平滑动画的绘制时间。 ⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。
网友评论