MOBILE HTML5學習手冊

406

|

第十四章

transform: translatez(0) rotate(360deg);

}

}

注意，就算上述範例沒有要做成動畫，我也加入了 3D 變形。如果你要隨時對某個元素

做硬體加速，就讓它一直保持硬體加速。我們不希望在設備將元素從 CPU 移到 GPU 的

過程中，讓元素短暫地消失。

避免重繪與重新排版

重繪與重新排版是讓 JavaScript 遲緩的主因，也是動畫不順暢的主因。

重繪是在元素的外觀改變時，螢幕被重新繪製，但它不會影響版面配置。改變元素的顏

色、可見度或背景圖像都會造成重繪。一般而言，重繪不會耗費什麼資源，但有時會

重度耗費資源，因為 DOM 樹所有節點的可見度與每一個節點的所有圖層都需要納入考

量。當你使用 alpha 透明度時，重繪是相當消耗資源的動作。

諸如陰影或 Alpha 透明漸層等 Alpha 透明模糊效果一定會花很多時間來算繪，因為瀏覽

器需要根據透明度及其底下的顏色來計算每一個像素的顏色。就算最終顏色被上面的元

素蓋住，因而無法讓使用者看到，也要進行計算，因為背景圖像與陰影等 CSS 特性都是

從後面畫到前面的。

因為繪製的時間非常快，一般而言，將最佳化的目標放在其他地方對你而言比較划算。

但是如果你要進行反覆地重繪，例如非硬體加速的轉換或動畫，就應盡量減少重繪的時

間。就動畫而言，瀏覽器必須在 16.67 ms 之內重繪動畫節點，才不會讓動畫發生跳格的

現象。過多的像素會浪費許多 CPU 的處理時間。

重新排版會對效能造成更大的影響，因為它會影響一部分網頁的版面配置（或整個網 ...