不过性能最优的方式还是要为被拖拽的那个元素触发composite layer(可以叫它合成层),因为现在浏览器一般都是 合成化渲染,并且大部分 光栅化(就是把元素形状的几何数据描述变成像素描述的过程,可以理解成矢量变成位图)过程都是在CPU上进行的,如果不把被拖拽的那个元素触发成为 合成层 那么CPU就会重复的paint这个元素,这是不合理的(CPU paint的过程比较耗时),所以应该让CPU尽量少的paint这个元素,最好只paint一次,之后的拖拽(也就是位移,甚至是旋转啊、缩放啊等这些仿射变换) 都可以直接交给GPU在合成(composited)的时候来做,这也就是所谓的硬件加速机制。
合成过程就是把几个合成层(一个合成层可以是 一个元素或多个元素组合经过CPU 光栅化后得到的图片)根据各个层的几何顶点信息、矩阵描述、透明度、blend效果等信息使用GPU进行重新的光栅化渲染到一张直接投影到屏幕上的图片上(帧缓冲区 framebuffer),然而这里的光栅化是非常快的,不同于CPU的那个光栅化的过程。原因大致如下:
一、因为这个时候的渲染只是把一张现成的位图合成到一起(就像纹理贴图,可以简单理解成像素值的简单计算和拷贝)。而不像CPU光栅化,它是将非常复杂的几何数据(是由浏览器分析dom的css样式所得到的)通过一系列复杂的逻辑计算后得到一个像素最后得到一张图片。
二、因为GPU有非常多个处理单元在并行的处理这些简单的渲染,它的计算吞吐量是很大的。而CPU的处理单元非常少,做强逻辑的计算非常适合,但是做这种简单的加减乘除计算不如GPU快(人多力量大)。