CSS 性能優化筆記

在實習作一個移動項目的時候，實現一個動畫效果，在 iPhone 和 Chrome 上調試沒有問題，在千元左右的 Android 機上測試問題就很大了，卡頓很是明顯，百思不得其解，吐血，卒。

這個悲傷的故事就是本文的引子，真真切切的體會到了 CSS 對用戶體驗的影響很是明顯，稍有不慎就是一個大坑。下面，咱們就來談談 CSS 性能優化的問題。

加載性能

• 減小文件體積，壓縮代碼

• 減小阻塞加載，不要用 import

• 提升併發（這個不甚理解）

選擇器性能

對總體性能的影響能夠忽略不計了，可是選擇器的考究更可能是爲了規範化和可維護性、健壯性。具體怎麼實施能夠參考 Github 的這個分享：GitHub's CSS Performance by Jon Rohan

渲染性能

渲染性能是 CSS 優化最重要的關注對象。咱們先來了解一下瀏覽器的渲染機制。

瀏覽器的渲染機制

瀏覽器渲染展現網頁的過程，大體分爲如下幾個步驟：

1. 解析HTML(HTML Parser)

2. 構建DOM樹(DOM Tree)

3. 渲染樹構建(Render Tree)

4. 繪製渲染樹(Painting)

慎重選擇高消耗的樣式

什麼 CSS 屬性是高消耗的？就是那些繪製前須要瀏覽器進行大量計算的屬性。

• box-shadows

• border-radius

• transparency

• transforms

• CSS filters（性能殺手）

避免過度重排(Reflow)

簡單解釋一下 Reflow：當元素改變的時候，將會影響文檔內容或結構，或元素位置，此過程稱爲 Reflow。

常見的重排元素
width	height	padding	margin
display	border-width	border	top
position	font-size	float	text-align
overflow-y	font-weight	overflow	left
font-family	line-height	vertical-align	right
clear	white-space	bottom	min-height

怎麼減小 Reflow

1. 不要一條一條地修改 DOM 的樣式，預先定義好 class，而後修改 DOM 的 className

2. 把 DOM 離線後修改，好比：先把 DOM 給 display:none (有一次 Reflow)，而後你修改100次，而後再把它顯示出來

3. 不要把 DOM 結點的屬性值放在一個循環裏當成循環裏的變量

4. 儘量不要修改影響範圍比較大的 DOM

5. 爲動畫的元素使用絕對定位 absolute / fixed

6. 不要使用 table 佈局，可能很小的一個小改動會形成整個 table 的從新佈局

避免過度重繪(Repaints)

當元素改變的時候，將不會影響元素在頁面當中的位置（好比 background-color, border-color, visibility），瀏覽器僅僅會應用新的樣式重繪此元素，此過程稱爲 Repaint。

常見的重繪元素
color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

優化動畫

CSS3 動畫是優化的重中之重。除了作到上面兩點，減小 Reflow 和 Repaints 以外，還須要注意如下方面。

啓用 GPU 硬件加速

GPU（Graphics Processing Unit） 是圖像處理器。GPU 硬件加速是指應用 GPU 的圖形性能對瀏覽器中的一些圖形操做交給 GPU 來完成，由於 GPU 是專門爲處理圖形而設計，因此它在速度和能耗上更有效率。
GPU 加速能夠不只應用於3D，並且也能夠應用於2D。這裏， GPU 加速一般包括如下幾個部分：Canvas2D，佈局合成（Layout Compositing）, CSS3轉換（transitions），CSS3 3D變換（transforms），WebGL和視頻(video)。

/*
 * 根據上面的結論
 * 將 2d transform 換成 3d
 * 就能夠強制開啓 GPU 加速
 * 提升動畫性能
 */
div {
  transform: translate(10px, 10px);
}
div {
  transform: translate3d(10px, 10px, 0);
}

須要注意的是，開啓硬件加速相應的也會有額外的開銷，參見這篇文章 CSS 硬件加速的好與壞

參考

• CSS 優化、提升性能的方法有哪些？ - 趙望野

• CSS performance revisited: selectors, bloat and expensive styles

• 瀏覽器的渲染原理簡介

• 談談 CSS 性能

• 前端工程師須要明白的「瀏覽器渲染」

• 學習經過 CSS 硬件加速提高你網站的性能

• CSS 硬件加速的好與壞

• 兩張圖解釋 CSS 動畫的性能