性能差距還是很大的特別是在移動(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)成的位圖合成到一起（就像紋理貼圖，可以簡單理解成像素值的簡單計(jì)算和拷貝）。而不像CPU光柵化，它是將非常復(fù)雜的幾何數(shù)據(jù)（是由瀏覽器分析dom的css樣式所得到的）通過一系列復(fù)雜的邏輯計(jì)算后得到一個(gè)像素最后得到一張圖片。二、因?yàn)镚PU有非常多個(gè)處理單元在并行的處理這些簡單的渲染，它的計(jì)算吞吐量是很大的。而CPU的處理單元非常少，做強(qiáng)邏輯的計(jì)算非常適合，但是做這種簡單的加減乘除計(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)成的位圖合成到一起（就像紋理貼圖，可以簡單理解成像素值的簡單計(jì)算和拷貝）。而不像CPU光柵化，它是將非常復(fù)雜的幾何數(shù)據(jù)（是由瀏覽器分析dom的css樣式所得到的）通過一系列復(fù)雜的邏輯計(jì)算后得到一個(gè)像素最后得到一張圖片。二、因?yàn)镚PU有非常多個(gè)處理單元在并行的處理這些簡單的渲染，它的計(jì)算吞吐量是很大的。而CPU的處理單元非常少，做強(qiáng)邏輯的計(jì)算非常適合，但是做這種簡單的加減乘除計(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ā)?這種情況。
