CSS 高效優化策略之編寫風格

一般談論到效率、效能問題，我們都很少想到css在請求回來之後，在瀏覽器進行css渲染的效率是怎樣的。本文來介紹一下對於css的一些高效優化策略,可以提高我們頁面的css渲染效率.

值得注意的是,渲染引擎解析 css 選擇器時是從右往左解析的,這樣做是為了減少無效匹配次數，從而匹配快、效能更優。

所以，我們在書寫 css selector 時，從右向左的 selector term 匹配節點越少越好。因此在編寫css時就要避免深層次的dom結構,還有一般不要超過3層的css匹配巢狀，比如：

div > div > div > p

/* 或者 */
.class1}}
}

而attribute selector的匹配是最慢的，尤其是p[id="id1"]這種，明明有id，可以使用效率更高的id選擇器，卻偏偏要降幾個維度。

到這裡，結合前面從右到左規則和id選擇器的高效匹配，我們就會發現下面這種寫法的效率是不高的。

#id_name > em

html body ul li a

瀏覽器並不是一獲取到 css 樣式就立馬開始解析，而是根據 css 樣式的書寫順序將之按照 dom 樹的結構分布渲染樣式，然後開始遍歷每個樹結點的 css 樣式進行解析，此時的 css 樣式的遍歷順序完全是按照之前的書寫順序。

因此，在解析過程中，一旦瀏覽器發現某個元素的定位變化影響布局，則需要倒回去重新渲染。

比方說：

.class_name

我們對**進行調整：這樣就能讓渲染引擎更高效的工作

.class_name

position  display  float  left  top  right  bottom   overflow  clear   z-index

width  height  padding  border  margin   background

font-family   font-size   font-style   font-weight   font-varient   color

text-align   vertical-align   text-wrap   text-transform   text-indent    text-decoration   letter-spacing    word-spacing    white-space   text-overflow

content   box-shadow   border-radius  transform

不過要注意的是，繼承只發生在原生標籤之間，如果使用了第三方框架，當你希望框架的元件也繼承父級的屬性，這是不現實的，因為框架元件內部通常會定義一些自己通用的全域性樣式。

還有其他一些編寫規則，比方說：

1、將瀏覽器字首置於前面，將標準樣式屬性置於最後。

2、遵守 csslint 規則。

3、減少 css 文件體積。

4、避免使用 @import。等…

不過，如果你的專案使用了sacc或者scss之類的css預處理器，那麼這些問題你都可以忽略,因為這些預處理器已經幫我們把css優化到最佳狀態再進行打包，供瀏覽器渲染。

編寫高效的CSS選擇符

css選擇符是從右到左進行匹配的。樣式系統從最右邊的選擇符開始向左匹配規則。只要當前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的元素，或者因為不匹配而退出。避免使用通配規則 除傳統的通配選擇符，相鄰兄弟選擇符 子選擇符 後代選擇符和屬性選擇符都歸納到 通配規則 下。他推...

高效併發之鎖優化

前面討論執行緒間互斥同步的時候，提到了互斥同步對效能最大的影響是阻塞的實現，掛起執行緒和恢復執行緒操作都需要轉入核心態中完成，這些操作給系統的併發效能帶來了很大的壓力。共享資料的鎖定狀態只會持續很短一段時間，為了這段時間去掛起和恢復執行緒並不值得。如果物理機器有乙個以上的處理器，能讓兩個或以上的執行...

GitHub倡導的CSS編寫風格及檔案目錄部署指南

這個css風格指南是在github內部用於應用程式的指南。我們鼓勵您建立乙個適合你自己團隊的風格指南。在你閱讀這個之前，你需要大致了解scss語法和kss文件。雖然我們通過kss文件把風格移植到了scss上，但請務必立刻公升級整個元素的css。不要混合少量scss和無格式的css。編碼風格 1.用兩...