【前端詞典】幾個有益的 CSS 小知識

前言

今天偷個懶，不長篇大論，分享幾個你可能不知道的 CSS 小知識。

樣式的順序

CSS 代碼：

.red {

    color: red;

}

.blue {

    color: blue;

}

HTML 代碼：

<div class="red blue">這是什麼顏色</div>

<div class="blue red">這是什麼顏色</div>

記得以前這是一道比較火的 CSS 考題，當時好像是有很多的人答錯（30% 以上）

答案大家應該是知道的。

能夠這樣提高 CSS 性能

後代選擇器

樣式選擇器中間的空格是什麼？它的名字是 —— 後代選擇器。

div p {

    color: #3388ff;

    font-size: 14px;

}

後代選擇器或許會很耗性能

耗能與否取決於項目的體積，但不建議使用沒有意義的後代選擇器。例如：

.div p {

    // ...

}

爲何會更消耗性能呢?

由於瀏覽器首先會找到全部 p 標籤，而後再向上查找包含 class 爲 div 的元素。這樣一來若是 代碼中有不少 p 標籤，無疑是會作不少重複工做的。

因此能夠減小使用 HTML 標籤來定義 CSS 的方式，換成使用具體的 class。

瀏覽器會從右到左解析 CSS 選擇器

.content_box div p a {

    // ...

}

瀏覽器會對上面的例子作以下的步驟處理：

1. 首先找到頁面全部的 <a> 元素

2. 而後向上找到被 <p> 元素包裹的 <a> 元素

3. 再向上查找到一直到 .content_box 的元素

從上面的步驟咱們能夠看出，越靠右的選擇器越具備惟一性，瀏覽器解析 CSS 屬性的效率就越高。

因此必定換成使用具體的 class 編寫 CSS 代碼。

避免 reflow 風險

咱們知道修改某些 CSS 屬性會致使整個頁面佈局的重繪( repaint )/重排( reflow )。

repaint 的速度遠快於 reflow，因此避免 reflow 更重要

致使 repaint 和 reflow 的緣由

1. DOM 元素的添加、修改、刪除（repaint、reflow）

2. 僅僅修改 DOM 元素的字體顏色（repaint，不須要調整佈局）

3. 應用新的樣式或者修改任何影響元素外觀的屬性（repaint、reflow）

4. resize，頁面滾動（repaint、reflow）

5. 讀取元素的某些屬性（repaint、reflow）

   （offsetTop/Left/Width/Height、getComputedStyle、scrollTop/Left/Width/Height、clientTop/Left/Width/Height等）

若是在大量的元素上更改這些屬性，那麼計算和更新他們的位置/大小須要花費很長的時間。

更加消耗性能的 CSS 屬性

有一些 CSS 屬性會比其餘屬性消耗能多的性能，即瀏覽器解析這些屬性須要花費更多的時間。

如：border-radius、 box-shadow、 filter、 :nth-child等

固然這些屬性咱們常常使用，有些沒法避免。要作出適當的取捨。

最後

若是你想進【大前端交流羣】，關注公衆號點擊「交流加羣」添加機器人自動拉你入羣。關注我第一時間接收最新干貨。