歡迎移步我的博客閱讀：《實(shí)用的 CSS — 動(dòng)畫(huà)性能對(duì)比》
前言
在現(xiàn)代瀏覽器中，渲染頁(yè)面所要負(fù)責(zé)的線程主要有兩個(gè)：主線程和排版線程。
主線程
- 運(yùn)行 JS
- 計(jì)算 HTML 元素的 CSS 樣式
- 布局頁(yè)面
- 把頁(yè)面元素繪制成一個(gè)或多個(gè)位圖
- 把這些位圖移交給排版線程
在瀏覽器開(kāi)始渲染頁(yè)面，或者長(zhǎng)時(shí)間執(zhí)行某個(gè) JS 時(shí)，主線程會(huì)一直在忙碌狀態(tài)，此時(shí)對(duì)于用戶(hù)的任何輸入或是操作都不會(huì)有所響應(yīng)。
排版線程
- 通過(guò) GPU 渲染位圖，并顯示在屏幕上
- 向主線程請(qǐng)求更新位圖的可見(jiàn)部分或即將可見(jiàn)的部分
- 判斷出當(dāng)前頁(yè)面處于可見(jiàn)的部分
- 判斷出即將通過(guò)頁(yè)面滾動(dòng)而可見(jiàn)的部分
- 隨著用戶(hù)滾動(dòng)頁(yè)面來(lái)移動(dòng)這些部分
排版線程對(duì)于用戶(hù)的操作保持快速的響應(yīng)，普遍的效率時(shí)每秒 60 幀的速度去刷新顯示。
Transtion
下面我們?cè)诰W(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)元素的高度變化的動(dòng)畫(huà)，鼠標(biāo)懸浮在元素上動(dòng)畫(huà)啟動(dòng)，直至完成：
<style>
#foo {
height: 100px;
width: 100px;
background: red;
transition: height 1s linear;
}
#foo:hover {
height: 200px;
}
</style>
<body>
<div id="foo"></div>
</body>
通過(guò)對(duì)上述代碼的觀察，讓我們來(lái)了解一下瀏覽器的兩個(gè)線程是如何協(xié)同工作的：
圖中橘黃色部分代表操作相對(duì)較慢，消耗較大；藍(lán)色部分代表操作相對(duì)較快，消耗較小
從上圖我們可以看到，瀏覽器的兩個(gè)線程在來(lái)回地切換工作，而且橘黃色出現(xiàn)次數(shù)較多，這意味著瀏覽器需要處理相當(dāng)多的工作。
對(duì)于瀏覽器而言，由于元素的高度一直在變化，因此這個(gè)動(dòng)畫(huà)的每一幀中，都需要重新布局 ——> 繪制頁(yè)面 ——> 將新的位圖加載到 GPU 中 ——> 顯示。而其中加載到 GPU 是一個(gè)相對(duì)緩慢的操作。
同時(shí)我們也在通過(guò)瀏覽器去查看元素動(dòng)畫(huà)的過(guò)程，其實(shí)是由略微卡頓的現(xiàn)象的。
Transform
經(jīng)過(guò)上面的實(shí)驗(yàn)，我們對(duì) transition 屬性有了比較好的了解；同時(shí)我們對(duì)上述動(dòng)畫(huà)性能也有一個(gè)了解。接著我需要在網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)元素的大小變化動(dòng)畫(huà)，鼠標(biāo)懸浮在元素上動(dòng)畫(huà)啟動(dòng)，直至完成：
<style>
#bar {
height: 100px;
width: 100px;
background: red;
transition: transform 1s linear;
}
#bar:hover {
transform: scale(2);
}
</style>
<body>
<div id="bar"></div>
</body>
完成上述實(shí)驗(yàn)，再讓我們來(lái)看看兩個(gè)線程工作的過(guò)程：
由此我們可以看到，兩個(gè)線程來(lái)回切換的情況并不多，橘黃色部分出現(xiàn)的次數(shù)也較少，藍(lán)色部分居絕大部分，這意味著這個(gè)動(dòng)畫(huà)效果相較于上面的要流暢很多。
在定義中，transform 是不會(huì)使瀏覽器產(chǎn)生重新排版的，因此 transform 不會(huì)影響原本的布局，以及周?chē)脑?。它?huì)將定義的元素作為一個(gè)整體進(jìn)行縮放、移動(dòng)或旋轉(zhuǎn)等。
基于 transform 這類(lèi)的特性，瀏覽器在渲染頁(yè)面時(shí)可以節(jié)省很多不必要的開(kāi)支，例如重新布局和將位圖傳給 GPU 等工作，這樣就使得動(dòng)畫(huà)更有效率。
總結(jié)
當(dāng)頁(yè)面需要位移動(dòng)畫(huà)時(shí)，我們有兩種方案：使用 position 或是 transalte，而這兩種是符合上述情況的。其中 position 的位移方案與第一個(gè)符合，在動(dòng)畫(huà)執(zhí)行過(guò)程中會(huì)使瀏覽器重新渲染；另一外 transalte 則與第二個(gè)符合，在執(zhí)行動(dòng)畫(huà)時(shí)不會(huì)發(fā)生重新渲染。因此，在需要寫(xiě)動(dòng)畫(huà)時(shí)，我們需要選擇合適的方案，最好是選擇 scale()、rotate()、transalte() 等，因?yàn)樗麄兙哂懈玫男阅堋?/p>
參考
W3C: CSS Transforms
W3C: CSS Transitions
css-animations-and-transitions-performance
