前端效能最佳化（css動畫篇）

標籤：

正巧看到在送書，於是乎找了找自己部落格上記錄過的一些東西來及其無恥的蹭書了~~~

小廣告：更多內容可以看我的部落格

最近拜讀了一下html5rocks上幾位大神寫的一篇關於CSS3動畫效能最佳化的文章，學到了很多，在這裡記錄一下，其中的知識都是來源於這倆篇文章，我只是截取了其中比較關注的內容出來，原文地址High Performance Animations及Accelerated Rendering in Chrome

原理

現代瀏覽器在使用CSS3動畫時，以下四種情形繪製的效率較高，分別是：
* 改變位置
* 改變大小
* 旋轉
* 改變透明度

層？重繪？迴流和重布局？圖層重組？

首先要瞭解CSS的圖層的概念（Chrome瀏覽器）

瀏覽器在渲染一個頁面時，會將頁面分為很多個圖層，圖層有大有小，每個圖層上有一個或多個節點。在渲染DOM的時候，瀏覽器所做的工作實際上是：
1. 擷取DOM後分割為多個圖層
2. 對每個圖層的節點計算樣式結果（Recalculate style--樣式重計算）
3. 為每個節點產生圖形和位置（Layout--迴流和重布局）
4. 將每個節點繪製填充到圖層位元影像中（Paint Setup和Paint--重繪）
5. 圖層作為紋理上傳至GPU
6. 符合多個圖層到頁面上產生最終螢幕映像（Composite Layers--圖層重組）

Chrome中滿足以下任意情況就會建立圖層：
* 3D或透視變換（perspective transform）CSS屬性
* 使用加速視頻解碼的<video>節點
* 擁有3D（WebGL）上下文或加速的2D內容相關的<canvas>節點
* 混合外掛程式（如Flash）
* 對自己的opacity做CSS動畫或使用一個動畫webkit變換的元素
* 擁有加速CSS過濾器的元素
* 元素有一個包含複合層的後代節點（一個元素擁有一個子項目，該子項目在自己的層裡）
* 元素有一個z-index較低且包含一個複合層的兄弟元素（換句話說就是該元素在複合層上面渲染）

需要注意的是，如果圖層中某個元素需要重繪，那麼整個圖層都需要重繪。比如一個圖層包含很多節點，其中有個gif圖，gif圖的每一幀，都會重回整個圖層的其他節點，然後產生最終的圖層位元影像。所以這需要通過特殊的方式來強制gif圖屬於自己一個圖層（translateZ(0)或者translate3d(0,0,0)），CSS3的動畫也是一樣（好在絕大部分情況瀏覽器自己會為CSS3動畫的節點建立圖層）

層和CSS動畫

簡化一下上述過程，每一幀動畫瀏覽器可能需要做如下工作：
1. 計算需要被載入到節點上的樣式結果（Recalculate style--樣式重計算）
2. 為每個節點產生圖形和位置（Layout--迴流和重布局）
3. 將每個節點填充到圖層中（Paint Setup和Paint--重繪）
4. 組合圖層到頁面上（Composite Layers--圖層重組）

如果我們需要使得動畫的效能提高，需要做的就是減少瀏覽器在動畫運行時所需要做的工作。最好的情況是，改變的屬性僅僅印象圖層的組合，變換（transform）和透明度（opacity）就屬於這種情況

現代瀏覽器如Chrome，Firefox，Safari和Opera都對變換和透明度採用硬體加速，但IE10+不是很確定是否硬體加速

觸發重布局的屬性

有些節點，當你改變他時，會需要重新布局（這也意味著需要重新計算其他被影響的節點的位置和大小）。這種情況下，被影響的DOM樹越大（可見節點），重繪所需要的時間就會越長，而渲染一幀動畫的時間也相應變長。所以需要儘力避免這些屬性

一些常用的改變時會觸發重布局的屬性：
盒子模型相關屬性會觸發重布局：
* width
* height
* padding
* margin
* display
* border-width
* border
* min-height

定位屬性及浮動也會觸發重布局：
* top
* bottom
* left
* right
* position
* float
* clear

改變節點內部文字結構也會觸發重布局：
* text-align
* overflow-y
* font-weight
* overflow
* font-family
* line-height
* vertival-align
* white-space
* font-size

這麼多常用屬性都會觸發重布局，可以看到，他們的特點就是可能修改整個節點的大小或位置，所以會觸發重布局

別使用CSS類名做狀態標記

如果在網頁中使用CSS的類來對節點做狀態標記，當這些節點的狀態標記類修改時，將會觸發節點的重繪和重布局。所以在節點上使用CSS類來做狀態比較是代價很昂貴的

觸發重繪的屬性

修改時只觸發重繪的屬性有：
* color
* border-style
* border-radius
* visibility
* text-decoration
* background
* background-image
* background-position
* background-repeat
* background-size
* outline-color
* outline
* outline-style
* outline-width
* box-shadow

這樣可以看到，這些屬性都不會修改節點的大小和位置，自然不會觸發重布局，但是節點內部的渲染效果進行了改變，所以只需要重繪就可以了

手機就算重繪也很慢

在重繪時，這些節點會被載入到GPU中進行重繪，這對行動裝置如手機的影響還是很大的。因為CPU不如台式機或膝上型電腦，所以繪畫巫妖的時間更長。而且CPU與GPU之間的有較大的頻寬節流設定，所以紋理的上傳需要一定時間

觸發圖層重組的屬性透明度竟然不會觸發重繪？

需要注意的是，上面那些觸發重繪的屬性裡面沒有opacity（透明度），很奇怪不是嗎？實際上透明度的改變後，GPU在繪畫時只是簡單的降低之前已經畫好的紋理的alpha值來達到效果，並不需要整體的重繪。不過這個前提是這個被修改opacity本身必須是一個圖層，如果圖層下還有其他節點，GPU也會將他們透明化

強迫瀏覽器建立圖層

在Blink和WebKit的瀏覽器中，一當一個節點被設定了透明度的相關過渡效果或動畫時，瀏覽器會將其作為一個單獨的圖層，但很多開發人員使用translateZ(0)或者translate3d(0,0,0)去使瀏覽器建立圖層。這種方式可以消除在動畫開始之前的圖層建立時間，使得動畫儘快開始（建立圖層和繪製圖層還是比較慢的），而且不會隨著消除鋸齒而匯出突變。不過這種方法需要節制，否則會因為建立過多的圖層導致崩潰

Chrome中的消除鋸齒

Chrome中，非根圖層以及透明圖層使用grayscale antialiasing而不是subpixel antialiasing，如果消除鋸齒方法變化，這個效果將會非常顯著。如果你打算預先處理一個節點而不打算等到動畫開始，可以通過這種強迫瀏覽器建立圖層的方式進行

transform變換是你的選擇

我們通過節點的transform可以修改節點的位置、旋轉、大小等。我們平常會使用left和top屬性來修改節點的位置，但正如上面所述，left和top會觸發重布局，修改時的代價相當大。取而代之的更好方法是使用translate，這個不會觸發重布局

JS動畫和CSS3動畫的比較

我們經常面臨一個抉擇：是使用JavaScript的動畫還是使用CSS的動畫，下面將對比一下這兩種方式

JS動畫

缺點：JavaScript在瀏覽器的主線程中運行，而其中還有很多其他需要啟動並執行JavaScript、樣式計算、布局、繪製等對其幹擾。這也就導致了線程可能出現阻塞，從而造成丟幀的情況。

優點：JavaScript的動畫與CSS預先定義好的動畫不同，可以在其動畫過程中對其進行控制：開始、暫停、回放、中止、取消都是可以做到的。而且一些動畫效果，比如視差滾動效果，只有JavaScript能夠完成

CSS動畫

缺點：缺乏強大的控制能力。而且很難以有意義的方式結合到一起，使得動畫變得複雜且易於出問題。 優點：瀏覽器可以對動畫進行最佳化。它必要時可以建立圖層，然後在主線程之外運行。

前瞻

Google目前正在探究通過JS的多線程（Web Workers）來提供更好的動畫效果，而不會觸發重布局及樣式重計算

結論

動畫給予了頁面豐富的視覺體驗。我們應該儘力避免使用會觸發重布局和重繪的屬性，以免失幀。最好提前申明動畫，這樣能讓瀏覽器提前對動畫進行最佳化。由於GPU的參與，現在用來做動畫的最好屬性是如下幾個：
* opacity
* translate
* rotate
* scale

前端效能最佳化（css動畫篇）