css 性能優化

本文都爲個人見解，不喜勿噴，感謝

• 避免使用多類選擇符

  • E6以及更古老的瀏覽器對類似.foo.bar的多類選擇符解析不正確
• 移除空的css規則
  • .foo { }空規則的產生原因一般來說是爲了預留樣式。去除這些空規則無疑能減少css文檔體積

• 正確使用display的屬性

  • 由於display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。CSS Lint會檢查一下幾點：
    • display:inline後不應該再使用width、height、margin、padding以及float。
    • display:inline-block後不應該再使用float。
    • display:block後不應該再使用vertical-align（設置行內包括行內塊級元素，垂直方向的對齊方式）。
    • display:table-*後不應該再使用margin或者float。

• 不濫用浮動（少用浮動）

  • 雖然浮動不可避免，但不可否認很多css bug是由於浮動而引起。CSS Lint一旦檢測出樣式文件中有超過10次的浮動便會提示警告。

• 不濫用web字體

  • 瀏覽器下載字體時候會阻塞頁面渲染損傷性能（例如：在向服務器發送請求一樣）

• 不聲明過多的font-size

• 不在選擇符中使用ID標識符

  • 考慮到樣式重用性以及與頁面的耦合性

• 標準化各種瀏覽器前綴

  • 通常將瀏覽器前綴置於前面，將標準樣式屬性置於最後
  • 類似：.foo {-moz-border-radius: 5px;border-radius: 5px; }

• 遵守盒模型規則

  • 正確使用box-sizing屬性