3.5. 性能優(yōu)化

性能優(yōu)化

慎重選擇高消耗的樣式

高消耗屬性在繪制前需要瀏覽器進(jìn)行大量計算：

• box-shadows
• border-radius
• transparency
• transforms
• CSS filters（性能殺手）

避免過分重排

當(dāng)發(fā)生重排的時候，瀏覽器需要重新計算布局位置與大小，更多詳情。

常見的重排元素:

• width
• height
• padding
• margin
• display
• border-width
• position
• top
• left
• right
• bottom
• font-size
• float
• text-align
• overflow-y
• font-weight
• overflow
• font-family
• line-height
• vertical-align
• clear
• white-space
• min-height

正確使用 Display 的屬性

Display 屬性會影響頁面的渲染，請合理使用。

• display: inline后不應(yīng)該再使用 width、height、margin、padding 以及 float；

• display: inline-block 后不應(yīng)該再使用 float；

• display: block 后不應(yīng)該再使用 vertical-align；

• display: table-* 后不應(yīng)該再使用 margin 或者 float；

不濫用 Float

Float在渲染時計算量比較大，盡量減少使用。

動畫性能優(yōu)化

動畫的實(shí)現(xiàn)原理，是利用了人眼的“視覺暫留”現(xiàn)象，在短時間內(nèi)連續(xù)播放數(shù)幅靜止的畫面，使肉眼因視覺殘象產(chǎn)生錯覺，而誤以為畫面在“動”。

動畫的基本概念：

• 幀：在動畫過程中，每一幅靜止畫面即為一“幀”;
• 幀率：即每秒鐘播放的靜止畫面的數(shù)量，單位是fps(Frame per second);
• 幀時長：即每一幅靜止畫面的停留時間，單位一般是ms(毫秒);
• 跳幀(掉幀/丟幀)：在幀率固定的動畫中，某一幀的時長遠(yuǎn)高于平均幀時長，導(dǎo)致其后續(xù)數(shù)幀被擠壓而丟失的現(xiàn)象。

一般瀏覽器的渲染刷新頻率是 60 fps，所以在網(wǎng)頁當(dāng)中，幀率如果達(dá)到 50-60 fps 的動畫將會相當(dāng)流暢，讓人感到舒適。

• 如果使用基于 javaScript 的動畫，盡量使用 requestAnimationFrame. 避免使用 setTimeout, setInterval.
• 避免通過類似 jQuery animate()-style 改變每幀的樣式，使用 CSS 聲明動畫會得到更好的瀏覽器優(yōu)化。
• 使用 translate 取代 absolute 定位就會得到更好的 fps，動畫會更順滑。

多利用硬件能力，如通過 3D 變形開啟 GPU 加速

一般在 Chrome 中，3D或透視變換（perspective transform）CSS屬性和對 opacity 進(jìn)行 CSS 動畫會創(chuàng)建新的圖層，在硬件加速渲染通道的優(yōu)化下，GPU 完成 3D 變形等操作后，將圖層進(jìn)行復(fù)合操作（Compesite Layers），從而避免觸發(fā)瀏覽器大面積重繪和重排。

注：3D 變形會消耗更多的內(nèi)存和功耗。

使用 translate3d 右移 500px 的動畫流暢度要明顯優(yōu)于直接使用 left：

.ball-1 {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
.ball-1.slidein{
  -webkit-transform: translate3d(500px, 0, 0);
}
.ball-2 {
  transition: left .5s ease; left：0;
}
.ball-2.slidein {
  left：500px;
}

提升 CSS 選擇器性能

CSS 選擇器對性能的影響源于瀏覽器匹配選擇器和文檔元素時所消耗的時間，所以優(yōu)化選擇器的原則是應(yīng)盡量避免使用消耗更多匹配時間的選擇器。而在這之前我們需要了解 CSS 選擇器匹配的機(jī)制， 如子選擇器規(guī)則：

#header > a {font-weight:blod;}

我們中的大多數(shù)人都是從左到右的閱讀習(xí)慣，會習(xí)慣性的設(shè)定瀏覽器也是從左到右的方式進(jìn)行匹配規(guī)則，推測這條規(guī)則的開銷并不高。

我們會假設(shè)瀏覽器以這樣的方式工作：尋找 id 為 header 的元素，然后將樣式規(guī)則應(yīng)用到直系子元素中的 a 元素上。我們知道文檔中只有一個 id 為 header 的元素，并且它只有幾個 a 元素的子節(jié)點(diǎn)，所以這個 CSS 選擇器應(yīng)該相當(dāng)高效。

事實(shí)上，卻恰恰相反，CSS 選擇器是從右到左進(jìn)行規(guī)則匹配。了解這個機(jī)制后，例子中看似高效的選擇器在實(shí)際中的匹配開銷是很高的，瀏覽器必須遍歷頁面中所有的 a 元素并且確定其父元素的 id 是否為 header 。

如果把例子的子選擇器改為后代選擇器則會開銷更多，在遍歷頁面中所有 a 元素后還需向其上級遍歷直到根節(jié)點(diǎn)。

#header  a {font-weight:blod;}

理解了CSS選擇器從右到左匹配的機(jī)制后，明白只要當(dāng)前選擇符的左邊還有其他選擇符，樣式系統(tǒng)就會繼續(xù)向左移動，直到找到和規(guī)則匹配的選擇符，或者因?yàn)椴黄ヅ涠顺?。我們把最右邊選擇符稱之為關(guān)鍵選擇器?！?a rel="external nofollow" target="_blank" target="_blank">更多詳情

1、避免使用通用選擇器

/* Not recommended */
.content * {color: red;}

瀏覽器匹配文檔中所有的元素后分別向上逐級匹配 class 為 content 的元素，直到文檔的根節(jié)點(diǎn)。因此其匹配開銷是非常大的，所以應(yīng)避免使用關(guān)鍵選擇器是通配選擇器的情況。

2、避免使用標(biāo)簽或 class 選擇器限制 id 選擇器

/* Not recommended */
button#backButton {…}
/* Recommended */
#newMenuIcon {…}

3、避免使用標(biāo)簽限制 class 選擇器

/* Not recommended */
treecell.indented {…}
/* Recommended */
.treecell-indented {…}
/* Much to recommended */
.hierarchy-deep {…}

4、避免使用多層標(biāo)簽選擇器。使用 class 選擇器替換，減少css查找

/* Not recommended */
treeitem[mailfolder="true"] > treerow > treecell {…}
/* Recommended */
.treecell-mailfolder {…}

5、避免使用子選擇器

/* Not recommended */
treehead treerow treecell {…}
/* Recommended */
treehead > treerow > treecell {…}
/* Much to recommended */
.treecell-header {…}

6、使用繼承

/* Not recommended */
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
/* Recommended */
#bookmarkMenuItem { list-style-image: url(blah) }