儘可能使用translate而不是改變top/left進行動畫（翻譯）

前言

    本文翻譯自 Why Moving Elements With Translate() Is Better Than Pos:abs Top/left，本文有改動，添加了一些做者本身的理解，不當之處還請看客指出。

翻譯正文

    目前咱們對文檔中的某個元素進行移動有兩種方式，

        1，使用transform提供的translate族函數進行緩動

        2，對元素進行絕對定位，在制定時間內改變top/left值

    可是，這兩種方式有什麼區別呢？

    長話短說，做者在經過模擬測試，並在chrome上檢測了動畫的FPS，發現了二者的顯著區別：性能。

    

    左上方的圖片是經過改變元素top/left進行動畫的幀率，而右上方則是調用translate函數的幀率。咱們能夠明顯看出左圖的每一幀都執行了相對較長時間的paint，在每一幀內，cpu都須要計算該元素的其餘樣式，特別是相對須要複雜計算的盒陰影，漸變，圓角等樣式，最後都須要將這些樣式應用到該元素內。從這個角度看，若是對於較爲老舊的移動設備進行相對複雜的動畫，那麼效果確定不理想。

    而經過調用translate，會啓動硬件加速，即在GPU層對該元素進行渲染。這樣，CPU就會相對解放出來進行其餘的計算，GPU對樣式的計算相對較快，且保證較大的幀率。咱們能夠經過2d和3d的transform來啓用GPU計算。

總結

    最後，總結下對元素進行動畫的一些要點：

        1，儘可能使用keyframes和transform進行動畫，這樣瀏覽器會自身分配每幀的長度，並做出優化

        2，若是非要使用js來進行動畫，使用requestAnimateFrame

        3，使用2d transform而不是改變top/left的值，這樣會有更短的repaint時間和更圓滑的動畫效果

        4，移動端的動畫效果可能會比pc端的差，所以必定要注意性能優化，儘可能減小動畫元素的DOM複雜性，待動畫結束後異步執行DOM操做