H5中CSS3動(dòng)畫的性能優(yōu)化
2020年的最后10天，愿你來年有始料不及的運(yùn)氣，也有突如其來的驚喜。
觸發(fā)重布局的屬性
有些節(jié)點(diǎn)，當(dāng)你改變他時(shí)，會(huì)需要重新布局（這也意味著需要重新計(jì)算其他被影響的節(jié)點(diǎn)的位置和大?。＿@種情況下，被影響的DOM樹越大（可見節(jié)點(diǎn)），重繪所需要的時(shí)間就會(huì)越長(zhǎng)，而渲染一幀動(dòng)畫的時(shí)間也相應(yīng)變長(zhǎng)。所以需要盡力避免這些屬性。
一些常用的改變時(shí)會(huì)觸發(fā)重布局的屬性：
盒子模型相關(guān)屬性會(huì)觸發(fā)重布局：
?width?height?padding?margin?display?border-width?border?min-height
定位屬性及浮動(dòng)也會(huì)觸發(fā)重布局：
?top?bottom?left?right?position?float?clear
改變節(jié)點(diǎn)內(nèi)部文字結(jié)構(gòu)也會(huì)觸發(fā)重布局：
?text-align?overflow-y?font-weight?overflow?font-family?line-height?vertival-align?white-space?font-size
這么多常用屬性都會(huì)觸發(fā)重布局，可以看到，他們的特點(diǎn)就是可能修改整個(gè)節(jié)點(diǎn)的大小或位置，所以會(huì)觸發(fā)重布局。
別使用CSS類名做狀態(tài)標(biāo)記
如果在網(wǎng)頁(yè)中使用CSS的類來對(duì)節(jié)點(diǎn)做狀態(tài)標(biāo)記，當(dāng)這些節(jié)點(diǎn)的狀態(tài)標(biāo)記類修改時(shí)，將會(huì)觸發(fā)節(jié)點(diǎn)的重繪和重布局。所以在節(jié)點(diǎn)上使用CSS類來做狀態(tài)比較是代價(jià)很昂貴的。
觸發(fā)重繪的屬性
修改時(shí)只觸發(fā)重繪的屬性有：
?color?border-style?border-radius?visibility?text-decoration?background?background-image?background-position?background-repeat?background-size?outline-color?outline?outline-style?outline-width?box-shadow
這樣可以看到，這些屬性都不會(huì)修改節(jié)點(diǎn)的大小和位置，自然不會(huì)觸發(fā)重布局，但是節(jié)點(diǎn)內(nèi)部的渲染效果進(jìn)行了改變，所以只需要重繪就可以了。
手機(jī)就算重繪也很慢
在重繪時(shí)，這些節(jié)點(diǎn)會(huì)被加載到GPU中進(jìn)行重繪，這對(duì)移動(dòng)設(shè)備如手機(jī)的影響還是很大的。因?yàn)镃PU不如臺(tái)式機(jī)或筆記本電腦，所以繪畫的時(shí)間更長(zhǎng)。
觸發(fā)圖層重組的屬性
透明度竟然不會(huì)觸發(fā)重繪
需要注意的是，上面那些觸發(fā)重繪的屬性里面沒有opacity（透明度），很奇怪不是嗎？實(shí)際上透明度的改變后，GPU在繪畫時(shí)只是簡(jiǎn)單的降低之前已經(jīng)畫好的紋理的alpha值來達(dá)到效果，并不需要整體的重繪。不過這個(gè)前提是這個(gè)被修改opacity本身必須是一個(gè)圖層，如果圖層下還有其他節(jié)點(diǎn)，GPU也會(huì)將他們透明化。
強(qiáng)迫瀏覽器創(chuàng)建圖層
在Blink和WebKit的瀏覽器中，當(dāng)一個(gè)節(jié)點(diǎn)被設(shè)定了透明度的相關(guān)過渡效果或動(dòng)畫時(shí)，瀏覽器會(huì)將其作為一個(gè)單獨(dú)的圖層，但很多開發(fā)者使用translateZ(0)或者translate3d(0,0,0)去使瀏覽器創(chuàng)建圖層。這種方式可以消除在動(dòng)畫開始之前的圖層創(chuàng)建時(shí)間，使得動(dòng)畫盡快開始（創(chuàng)建圖層和繪制圖層還是比較慢的），而且不會(huì)隨著抗鋸齒而導(dǎo)出突變。不過這種方法需要節(jié)制，否則會(huì)因?yàn)閯?chuàng)建過多的圖層導(dǎo)致崩潰。
transform變換是你的選擇
我們通過節(jié)點(diǎn)的transform可以修改節(jié)點(diǎn)的位置、旋轉(zhuǎn)、大小等。我們平常會(huì)使用left和top屬性來修改節(jié)點(diǎn)的位置，但正如上面所述，left和top會(huì)觸發(fā)重布局，修改時(shí)的代價(jià)相當(dāng)大。取而代之的更好方法是使用translate，這個(gè)不會(huì)觸發(fā)重布局。