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