3.5. 性能優(yōu)化

2018-02-24 15:44 更新

性能優(yōu)化

慎重選擇高消耗的樣式

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

  • box-shadows
  • border-radius
  • transparency
  • transforms
  • CSS filters(性能殺手)

避免過(guò)分重排

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

常見(jiàn)的重排元素:

  • 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 屬性會(huì)影響頁(yè)面的渲染,請(qǐng)合理使用。

  • 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在渲染時(shí)計(jì)算量比較大,盡量減少使用。

動(dòng)畫(huà)性能優(yōu)化

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

動(dòng)畫(huà)的基本概念:

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

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

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

High Performance Animations

多利用硬件能力,如通過(guò) 3D 變形開(kāi)啟 GPU 加速

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

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

使用 translate3d 右移 500px 的動(dòng)畫(huà)流暢度要明顯優(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 選擇器對(duì)性能的影響源于瀏覽器匹配選擇器和文檔元素時(shí)所消耗的時(shí)間,所以?xún)?yōu)化選擇器的原則是應(yīng)盡量避免使用消耗更多匹配時(shí)間的選擇器。而在這之前我們需要了解 CSS 選擇器匹配的機(jī)制, 如子選擇器規(guī)則:

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

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

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

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

如果把例子的子選擇器改為后代選擇器則會(huì)開(kāi)銷(xiāo)更多,在遍歷頁(yè)面中所有 a 元素后還需向其上級(jí)遍歷直到根節(jié)點(diǎn)。

#header  a {font-weight:blod;}

理解了CSS選擇器從右到左匹配的機(jī)制后,明白只要當(dāng)前選擇符的左邊還有其他選擇符,樣式系統(tǒng)就會(huì)繼續(xù)向左移動(dòng),直到找到和規(guī)則匹配的選擇符,或者因?yàn)椴黄ヅ涠顺觥N覀儼炎钣疫呥x擇符稱(chēng)之為關(guān)鍵選擇器。——更多詳情

1、避免使用通用選擇器

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

瀏覽器匹配文檔中所有的元素后分別向上逐級(jí)匹配 class 為 content 的元素,直到文檔的根節(jié)點(diǎn)。因此其匹配開(kāi)銷(xiāo)是非常大的,所以應(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) }
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)