前言

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

樣式的順序

CSS 代碼：

.red {    color: red;}.blue {    color: blue;}

HTML 代碼：

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

記得之前這是一道比較火的 CSS 考題，當(dāng)時好像是有不少的人答錯（30% 以上）

答案你們應(yīng)該是知道的。

可以這樣提升 CSS 性能

后代選擇器

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

div p {    color:#3388ff;    font-size:14px;}

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

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

.div p {    // ...}

為什么會更消耗性能呢?

因為瀏覽器首先會找到所有 p 標(biāo)簽，然后再向上查找包含 class 為 div 的元素。這樣一來如果 代碼中有很多 p 標(biāo)簽，無疑是會做很多重復(fù)工作的。

所以可以減少使用 HTML 標(biāo)簽來定義 CSS 的方式，換成使用具體的 class。

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

.content_box div p a {     // ...}

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

1. 首先找到頁面所有的 <a> 元素
2. 然后向上找到被 <p> 元素包裹的 <a> 元素
3. 再向上查找到一直到 .content_box 的元素

從上面的步驟我們可以看出，越靠右的選擇器越具有唯一性，瀏覽器解析 CSS 屬性的效率就越高。

所以一定換成使用具體的 class 編寫 CSS 代碼。

避免 reflow 風(fēng)險

我們知道修改某些 CSS 屬性會導(dǎo)致整個頁面布局的重繪( repaint )/重排( reflow )。

repaint 的速度遠快于 reflow，所以避免 reflow 更重要

導(dǎo)致 repaint 和 reflow 的原因

1. DOM 元素的添加、修改、刪除（repaint、reflow）
2. 僅僅修改 DOM 元素的字體顏色（repaint，不需要調(diào)整布局）
3. 應(yīng)用新的樣式或者修改任何影響元素外觀的屬性（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等

當(dāng)然這些屬性我們經(jīng)常使用，有些無法避免。要做出適當(dāng)?shù)娜∩帷?/p>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。