CSS3動畫給Web體驗帶來巨大提升，但創(chuàng)建高性能動畫卻不那么容易报账。你可能發(fā)現你的動畫不太流暢（特別是在移動端）研底，本文將探討CSS3動畫性能及其原理。
瀏覽器渲染過程
瀏覽器的渲染過程就是將頁面轉換成像素顯示到屏幕上透罢，它包括如下步驟：
對于CSS3動畫來說榜晦，每一幀都要經歷上述過程。關于最后一步合并渲染層（可以類比Photoshop的圖層）羽圃，瀏覽器會在特定的場合創(chuàng)建獨立的渲染層乾胶，每個渲染層由GPU獨立繪制，互不影響统屈，最后瀏覽器再把各個渲染層合并胚吁。這是一種代價較低的操作。
人眼感受流暢的動畫跑在60FPS左右愁憔，也就是說腕扶，每一幀要在(1S/60 = 16.66ms)16毫秒之內完成。如果你的動畫觸發(fā)了布局吨掌，那就意味著將有大量的元素需要重新繪制半抱，瀏覽器渲染的時間很可能超過16ms，頁面就會出現卡頓膜宋。然而在移動端僅僅重繪也很慢窿侈。所以要創(chuàng)建高性能動畫，我們就要設法跳過第2步和第3步：
使用transform和opacity
為了跳過布局和繪制秋茫，你只能使用那些僅觸發(fā)渲染層合并的屬性史简。目前，只有兩個屬性是滿足這個條件的：transform和opacity肛著。
應用transform或opacity屬性的的元素將獨占一個渲染層圆兵。它們的繪制在單獨的層中由GPU處理，最后由瀏覽器合并渲染層枢贿，因此不會觸發(fā)重繪殉农。這個過程也被成為硬件加速。
讓我們先用top和left屬性創(chuàng)建一個動畫（這里省略了兼容性寫法）：
為了在桌面瀏覽器上看出卡頓效果局荚，這里將多個同樣的動畫元素疊在一起超凳，可以看到明顯的卡頓愈污。
現在，我們用Chrome DevTools來看看發(fā)生了什么轮傍。打開Timeline面板并勾選Paint暂雹，便可以對動畫進行采樣分析了。
綠色的方塊代表Paint操作金麸，可以看到每一幀都發(fā)生了重繪：
紅色的三角表示發(fā)生了jank擎析，即一幀的渲染時間大大超過了16ms，動畫就會發(fā)生卡頓挥下。
現在揍魂，將動畫用tranform代替：
動畫變得流暢了。
再次采樣分析棚瘟，可以看到现斋，沒有發(fā)生Paint，而且每一幀的時間都接近16.66ms：
要查看創(chuàng)建的渲染層偎蘸，點擊橫條上的幀庄蹋，就會出現Layers選項卡，通過它你可以查看所有渲染層和它們被創(chuàng)建的原因迷雪。
強制創(chuàng)建渲染層
除了利用transform或opacity限书，你還可以主動把元素提升到渲染層中（強制硬件加速）：
.ball{will-change: transform;}
如果瀏覽器不支持will-change屬性的話，利用3D動畫屬性：
.ball{transform:translateZ(0)/*或者*/transform:translate3D(0, 0, 0)}
這個屬性告訴瀏覽器元素將執(zhí)行動畫章咧，于是瀏覽器會預先為元素創(chuàng)建獨立的渲染層倦西。它和2Dtransform的區(qū)別是，2Dtransform只是在動畫執(zhí)行的時候創(chuàng)建渲染層赁严，待動畫結束后刪除渲染層扰柠，而這里是預先創(chuàng)建渲染層。
我們加上這個屬性疼约，并改變元素的left和top屬性卤档，看看會發(fā)生什么：
現在，動畫效果比不加translateZ(0)要好程剥，但不如transform流暢劝枣。
在Layer標簽可以看到，瀏覽器創(chuàng)建了獨立渲染層织鲸。并且哨免，沒有觸發(fā)Paint。
但是昙沦，在某些時間段仍然發(fā)生了junk（紅色區(qū)域），動畫效果并不能像transform一樣“絲般順滑”载荔。至于junk的原因盾饮，可能是渲染過程中的一些額外工作導致的（例如渲染層的管理，CPU和GPU的通信等）。
預先創(chuàng)建渲染層會增大硬件負擔丘损，這會帶來一些副作用普办，所以應當謹慎使用這個屬性（進行實際測試），以免帶來的副作用大于好處徘钥。
PS：強制創(chuàng)建渲染層后衔蹲，可能會導致某些動畫閃爍的問題，筆者在安卓微信中遇到過呈础，根本原因尚不明舆驶。可以嘗試以下代碼fix而钞。
.ball{-webkit-backface-visibility: hidden;-webkit-perspective:1000;}
總結
僅使用transform和opacity創(chuàng)建動畫
謹慎使用will-change: transform或transform: translateZ(0)手動創(chuàng)建渲染層
