前言
大家都知道，對於網站來說，性能至關重要，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、首先找到頁面所有的 元素
2、然後向上找到被
元素包裹的 元素
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。
文章最開始代碼實例圖：
點此鏈接領取：自己是一名從事了多年開發的web前端老程序員，今年年初我花了一個月整理了一份最適合2020年學習的前端學習乾貨，想分享給每一位喜歡前端的小夥伴
喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！