對於效能優化我們常常在專案完成時才去考慮，經常在專案的末期，效能問題才會暴露出來，此時才進行一些相關的效能優化。
其實，如果我們從一開始編碼，就注意一些細節問題，後面的工作量會小很多，下面我們來看看在書寫css時，我們可以注意哪些細節，從而來提公升css處理效能。
先來看看這段**：
...
這是什麼顏色
這是什麼顏色
一、減少 後代選擇器 的使用
先來了解一下後代選擇器
div p.div p二、減少使用 html 標籤來定義 css 的方式，換成使用具體的 class
瀏覽器會從右到左解析 css 選擇器
.box div p a1、首先找到頁面所有的 元素
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。
以上就是一些提公升css效能的小知識的詳細內容
一些css的屬性
一些css的屬性 使整個頁面的元素都沒有頁邊距 margin 與填充距離 padding body 使整個頁面居中顯示 padding 12px 元件能與邊緣的距離 moz border radius 6px 6px 6px 6px 圓角 float left div同行顯示 margin 30px...
css的一些屬性
1 文字的水平居中 css實現單行文字水平居中 text align center 2 塊元素居中 保證margin left和margin right都為auto,就可以保證塊元素水平居中 如果要是使用margin 0 auto來實現塊元素居中，就要 指定這個元素的寬度 3 行內元素 使用text...
CSS一些常用屬性總結
css選擇器 類別選擇器 id選擇器 巢狀選擇器 子選擇器 屬性選擇器 重點說巢狀選擇器和子選擇器的區別以及屬性選擇器 舉個例子 p 下有 b b 下又有另乙個 b 子選擇器 p b 巢狀選擇器 p b 上述子選擇器只能選中第乙個 b 巢狀選擇器則能選中所有的 b 屬性選擇器 a title 只要標...