性能差距還是很大的特別是在移動(dòng)設(shè)備上镰禾，因?yàn)榇蠹叶贾罏g覽器在處理這兩種樣式時(shí)的流水線不同。position更新進(jìn)行 layout 重計(jì)算顾腊。而translate只需要對(duì)本元素的幾何數(shù)據(jù)點(diǎn)做偏移就好了粤铭。不過性能最優(yōu)的方式還是要為被拖拽的那個(gè)元素觸發(fā)composite layer（可以叫它合成層），因?yàn)楝F(xiàn)在瀏覽器一般都是 合成化渲染杂靶，并且大部分 光柵化（就是把元素形狀的幾何數(shù)據(jù)描述變成像素描述的過程梆惯，可以理解成矢量變成位圖）過程都是在CPU上進(jìn)行的酱鸭，如果不把被拖拽的那個(gè)元素觸發(fā)成為 合成層 那么CPU就會(huì)重復(fù)的paint這個(gè)元素，這是不合理的(CPU paint的過程比較耗時(shí))垛吗，所以應(yīng)該讓CPU盡量少的paint這個(gè)元素凹髓，最好只paint一次，之后的拖拽（也就是位移怯屉，甚至是旋轉(zhuǎn)啊扁誓、縮放啊等這些仿射變換） 都可以直接交給GPU在合成（composited）的時(shí)候來做，這也就是所謂的硬件加速機(jī)制蚀之。合成過程就是把幾個(gè)合成層（一個(gè)合成層可以是 一個(gè)元素或多個(gè)元素組合經(jīng)過CPU 光柵化后得到的圖片）根據(jù)各個(gè)層的幾何頂點(diǎn)信息蝗敢、矩陣描述、透明度足删、blend效果等信息使用GPU進(jìn)行重新的光柵化渲染到一張直接投影到屏幕上的圖片上（幀緩沖區(qū) framebuffer）寿谴，然而這里的光柵化是非常快的失受，不同于CPU的那個(gè)光柵化的過程讶泰。原因大致如下：一、因?yàn)檫@個(gè)時(shí)候的渲染只是把一張現(xiàn)成的位圖合成到一起（就像紋理貼圖拂到，可以簡(jiǎn)單理解成像素值的簡(jiǎn)單計(jì)算和拷貝）痪署。而不像CPU光柵化，它是將非常復(fù)雜的幾何數(shù)據(jù)（是由瀏覽器分析dom的css樣式所得到的）通過一系列復(fù)雜的邏輯計(jì)算后得到一個(gè)像素最后得到一張圖片兄旬。二狼犯、因?yàn)镚PU有非常多個(gè)處理單元在并行的處理這些簡(jiǎn)單的渲染，它的計(jì)算吞吐量是很大的领铐。而CPU的處理單元非常少悯森，做強(qiáng)邏輯的計(jì)算非常適合，但是做這種簡(jiǎn)單的加減乘除計(jì)算不如GPU快
性能差距還是很大的特別是在移動(dòng)設(shè)備上绪撵，因?yàn)榇蠹叶贾罏g覽器在處理這兩種樣式時(shí)的流水線不同瓢姻。position更新進(jìn)行 layout 重計(jì)算。而translate只需要對(duì)本元素的幾何數(shù)據(jù)點(diǎn)做偏移就好了音诈。不過性能最優(yōu)的方式還是要為被拖拽的那個(gè)元素觸發(fā)composite layer（可以叫它合成層）幻碱，因?yàn)楝F(xiàn)在瀏覽器一般都是 合成化渲染，并且大部分 光柵化（就是把元素形狀的幾何數(shù)據(jù)描述變成像素描述的過程细溅，可以理解成矢量變成位圖）過程都是在CPU上進(jìn)行的褥傍，如果不把被拖拽的那個(gè)元素觸發(fā)成為 合成層 那么CPU就會(huì)重復(fù)的paint這個(gè)元素，這是不合理的(CPU paint的過程比較耗時(shí))谒兄，所以應(yīng)該讓CPU盡量少的paint這個(gè)元素摔桦，最好只paint一次社付，之后的拖拽（也就是位移承疲，甚至是旋轉(zhuǎn)啊邻耕、縮放啊等這些仿射變換） 都可以直接交給GPU在合成（composited）的時(shí)候來做，這也就是所謂的硬件加速機(jī)制燕鸽。合成過程就是把幾個(gè)合成層（一個(gè)合成層可以是 一個(gè)元素或多個(gè)元素組合經(jīng)過CPU 光柵化后得到的圖片）根據(jù)各個(gè)層的幾何頂點(diǎn)信息兄世、矩陣描述、透明度啊研、blend效果等信息使用GPU進(jìn)行重新的光柵化渲染到一張直接投影到屏幕上的圖片上（幀緩沖區(qū) framebuffer）御滩，然而這里的光柵化是非常快的党远，不同于CPU的那個(gè)光柵化的過程削解。原因大致如下：一、因?yàn)檫@個(gè)時(shí)候的渲染只是把一張現(xiàn)成的位圖合成到一起（就像紋理貼圖沟娱，可以簡(jiǎn)單理解成像素值的簡(jiǎn)單計(jì)算和拷貝）氛驮。而不像CPU光柵化，它是將非常復(fù)雜的幾何數(shù)據(jù)（是由瀏覽器分析dom的css樣式所得到的）通過一系列復(fù)雜的邏輯計(jì)算后得到一個(gè)像素最后得到一張圖片济似。二矫废、因?yàn)镚PU有非常多個(gè)處理單元在并行的處理這些簡(jiǎn)單的渲染，它的計(jì)算吞吐量是很大的砰蠢。而CPU的處理單元非常少蓖扑，做強(qiáng)邏輯的計(jì)算非常適合，但是做這種簡(jiǎn)單的加減乘除計(jì)算不如GPU快
translate 是 transform 屬性的?個(gè)值台舱。改變transform或opacity不會(huì)觸發(fā)瀏覽器重新布局（reflow）或重繪（repaint）律杠，只會(huì)觸發(fā)復(fù)合（compositions）。?改變絕對(duì)定位會(huì)觸發(fā)重新布局竞惋，進(jìn)?觸發(fā)重繪和復(fù)合俩功。transform使瀏覽器為元素創(chuàng)建?個(gè) GPU 圖層，但改變絕對(duì)定位會(huì)使?到 CPU碰声。 因此translate()更?效诡蜓，可以縮短平滑動(dòng)畫的繪制時(shí)間。 ?translate改變位置時(shí)胰挑，元素依然會(huì)占據(jù)其原始空間蔓罚，絕對(duì)定位就不會(huì)發(fā)?這種情況。
