摘要：真真切切的體會到了 CSS 對用戶體驗的影響非常明顯，稍有不慎就是一個大坑。下面，我們就來談?wù)?CSS 性能優(yōu)化的問題。加載性能減少文件體積，壓縮代碼減少阻塞加載，不要用 import提高并發(fā)（這個不甚理解）選擇器性能對整體性能的影響可以忽略不計了，但是選擇器的考究更多是為了規(guī)范化和可維護性、健壯性。具體怎么實施可以參考 Github 的這個分享：GitHub's CSS Performa
真真切切的體會到了 CSS 對用戶體驗的影響非常明顯，稍有不慎就是一個大坑。下面，我們就來談?wù)?CSS 性能優(yōu)化的問題。
加載性能
減少文件體積，壓縮代碼
減少阻塞加載，不要用 import
提高并發(fā)（這個不甚理解）
選擇器性能
對整體性能的影響可以忽略不計了，但是選擇器的考究更多是為了規(guī)范化和可維護性、健壯性。具體怎么實施可以參考 Github 的這個分享：GitHub's CSS Performance by Jon Rohan
渲染性能
渲染性能是 CSS 優(yōu)化最重要的關(guān)注對象。我們先來了解一下瀏覽器的渲染機制。
瀏覽器的渲染機制
瀏覽器渲染展示網(wǎng)頁的過程，大致分為以下幾個步驟：
解析HTML(HTML Parser)
構(gòu)建DOM樹(DOM Tree)
渲染樹構(gòu)建(Render Tree)
繪制渲染樹(Painting)
慎重選擇高消耗的樣式
什么 CSS 屬性是高消耗的？就是那些繪制前需要瀏覽器進行大量計算的屬性。
box-shadows
border-radius
transparency
transforms
CSS filters（性能殺手）
避免過分重排(Reflow)
簡單解釋一下 Reflow：當元素改變的時候，將會影響文檔內(nèi)容或結(jié)構(gòu)，或元素位置，此過程稱為 Reflow。
怎么減少 Reflow
不要一條一條地修改 DOM 的樣式，預(yù)先定義好 class，然后修改 DOM 的 className
把 DOM 離線后修改，比如：先把 DOM 給 display:none (有一次 Reflow)，然后你修改100次，然后再把它顯示出來
不要把 DOM 結(jié)點的屬性值放在一個循環(huán)里當成循環(huán)里的變量
盡可能不要修改影響范圍比較大的 DOM
為動畫的元素使用絕對定位 absolute / fixed
不要使用 table 布局，可能很小的一個小改動會造成整個 table 的重新布局
避免過分重繪(Repaints)
當元素改變的時候，將不會影響元素在頁面當中的位置（比如 background-color, border-color, visibility），瀏覽器僅僅會應(yīng)用新的樣式重繪此元素，此過程稱為 Repaint。
優(yōu)化動畫
CSS3 動畫是優(yōu)化的重中之重。除了做到上面兩點，減少 Reflow 和 Repaints 之外，還需要注意以下方面。
啟用 GPU 硬件加速
GPU（Graphics Processing Unit） 是圖像處理器。GPU 硬件加速是指應(yīng)用 GPU 的圖形性能對瀏覽器中的一些圖形操作交給 GPU 來完成，因為 GPU 是專門為處理圖形而設(shè)計，所以它在速度和能耗上更有效率。
GPU 加速可以不僅應(yīng)用于3D，而且也可以應(yīng)用于2D。這里， GPU 加速通常包括以下幾個部分：Canvas2D，布局合成（Layout Compositing）, CSS3轉(zhuǎn)換（transitions），CSS3 3D變換（transforms），WebGL和視頻(video)。
/*
* 根據(jù)上面的結(jié)論
* 將 2d transform 換成 3d
* 就可以強制開啟 GPU 加速
* 提高動畫性能
*/
div {
transform: translate(10px, 10px);
}
div {
transform: translate3d(10px, 10px, 0);
}