前言
大家都知道，對(duì)于網(wǎng)站來(lái)說(shuō)，性能至關(guān)重要，css作為頁(yè)面渲染和內(nèi)容展現(xiàn)的重要環(huán)節(jié)，影響著用戶對(duì)整個(gè)網(wǎng)站的第一體驗(yàn)。因此，與其相關(guān)的性能優(yōu)化是不容忽視的。
對(duì)于性能優(yōu)化我們常常在項(xiàng)目完成時(shí)才去考慮，經(jīng)常在項(xiàng)目的末期，性能問(wèn)題才會(huì)暴露出來(lái)，此時(shí)才進(jìn)行一些相關(guān)的性能優(yōu)化。
其實(shí)，如果我們從一開(kāi)始編碼，就注意一些細(xì)節(jié)問(wèn)題，后面的工作量會(huì)小很多，下面我們來(lái)看看在書(shū)寫(xiě)CSS時(shí)，我們可以注意哪些細(xì)節(jié)，從而來(lái)提升CSS處理性能。
先來(lái)看看這段代碼：
<style> </style> ... <div class="red blue">這是什么顏色</div> <div class="blue red">這是什么顏色</div>
你覺(jué)得這兩塊內(nèi)容文字各是什么顏色呢？？？
答案,文章最后看圖。
回到主題：如何提升 CSS 性能？
一、減少 后代選擇器 的使用
先來(lái)了解一下后代選擇器
div p {
color: red;
font-size: 14px;
}
樣式選擇器中間的空格是什么？它的名字是 —— 后代選擇器。如果項(xiàng)目很大，后代選擇器非常多，這時(shí)候就很耗性能。所以不建議使用沒(méi)有意義的后代選擇器，如：
.div p {
// ...
}
后代選擇器為什么會(huì)更消耗性能呢?
因?yàn)闉g覽器首先會(huì)找到所有 p 標(biāo)簽，然后再向上查找包含 class 為 div 標(biāo)簽。這樣一來(lái)如果代碼中有很多 p 標(biāo)簽，無(wú)疑是會(huì)做很多重復(fù)工作的。
二、減少使用 html 標(biāo)簽來(lái)定義 CSS 的方式，換成使用具體的 class
瀏覽器會(huì)從右到左解析 CSS 選擇器
.box div p a {
// ...
}
瀏覽器會(huì)對(duì)上面的例子做如下的步驟處理：
1、首先找到頁(yè)面所有的 <a> 元素
2、然后向上找到被 <p> 元素包裹的 <a> 元素
3、再向上查找到一直到 .box 的元素
從上面的步驟我們可以看出，越靠右的選擇器越具有唯一性，瀏覽器解析 CSS 屬性的效率就越高。
所以一定換成使用具體的 class 編寫(xiě) CSS 代碼，可以有效的提升性能。
三、避免 reflow 風(fēng)險(xiǎn)
我們知道修改某些 CSS 屬性會(huì)導(dǎo)致整個(gè)頁(yè)面布局的重繪( repaint )/重排( reflow )。
重繪 的速度遠(yuǎn)快于 重排，所以避免 重排 更重要
重排會(huì)導(dǎo)致瀏覽器重新計(jì)算整個(gè)文檔，重新構(gòu)建渲染樹(shù)，這一過(guò)程會(huì)降低瀏覽器的渲染速度。如下所示，有很多操作會(huì)觸發(fā)重排，我們應(yīng)該避免頻繁觸發(fā)這些操作。
1、改變font-size和font-family
2、改變?cè)氐膬?nèi)外邊距
3、通過(guò)JS改變CSS類
4、通過(guò)JS獲取DOM元素的位置相關(guān)屬性（如width/height/left等）
5、CSS偽類激活
6、滾動(dòng)滾動(dòng)條或者改變窗口大小
此外，我們還可以通過(guò)CSS Trigger15查詢哪些屬性會(huì)觸發(fā)重排與重繪。 值得一提的是，某些CSS屬性具有更好的重排性能。如使用Flex時(shí)，比使用inline-block和float時(shí)重排更快，所以在布局時(shí)可以優(yōu)先考慮Flex。
如果大量的元素更改這些屬性，那么計(jì)算和更新他們的位置/大小需要花費(fèi)很長(zhǎng)的時(shí)間。
四、減少某些 消耗性能的 CSS 屬性
有一些 CSS 屬性會(huì)比其他屬性消耗能多的性能，即瀏覽器解析這些屬性需要花費(fèi)更多的時(shí)間。 如：border-radius、box-shadow、filter、:nth-child等。當(dāng)然這些屬性我們經(jīng)常使用，有些無(wú)法避免。要做出適當(dāng)?shù)娜∩帷?/p>
比如:nth-child，第一個(gè)元素你可以換成:first-child，最后一個(gè)可以換成:last-child。
文章最開(kāi)始代碼實(shí)例圖：
喜歡小編或者覺(jué)得小編文章對(duì)你有幫助的，可以點(diǎn)擊一波關(guān)注哦！
