如何提升css效能

提升方法： 1、將樣式寫在css檔案中，在head中引用；2、不使用「@import」；3、避免使用複雜的選擇器，層級越少越好；4、精簡頁面的樣式檔；5、利用CSS繼承減少程式碼量；6、慎重使用浮動、定位屬性；7、標準化各種瀏覽器前綴等。

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

如何提升CSS效能，根據頁面的載入效能和CSS程式碼效能，主要表現為： 載入效能 （主要從減少檔案體積，減少阻斷載入，提高並發面向入手） ，選擇器效能，渲染效能，可維護性。

 1、盡量將樣式寫在單獨的css檔案裡面，在head元素中引用

(1)內容和樣式分離，易於管理和維護

(2)減少頁面體積

(3)css檔案可以快取、重複使用，維護成本降低

2、不使用@import  

如果你使用@import屬性引入css的話,當使用者瀏覽的網速較慢時,他會看到一個沒有風格樣式的頁面,然後隨著CSS檔案被下載完成才可以看到應有的風格

#3、避免使用複雜的選擇器，層級越少越好  

專案的模組越來越多，功能越來越複雜，我們寫的CSS選擇器會內套多層，越來越複雜。建議選擇器的嵌套最好不要超過三層，簡潔的選擇器不僅可以減少css檔案大小，提高頁面的載入效能，瀏覽器解析時也會更加高效，也會提高開發人員的開發效率，降低了維護成本。

4、精簡頁面的樣式文件，去掉不用的樣式  

(1)樣式檔案偏大，影響載入速度

(2)瀏覽器會進行多餘的樣式匹配，影響渲染時間。

根據目前頁面需要的css去合併那些目前頁面用到的CSS文件， 合併成一個文件有一個優點：樣式文件會被瀏覽器緩存，進入到其他頁面樣式文件不用再去下載。

5、利用CSS繼承減少程式碼量 

我們知道有一部分CSS程式碼是可以繼承的，如果父元素已經設定了該樣式，子元素就不需要去設定該樣式，這也是提高效能的行之有效的方法。  

6、慎重使用高效能屬性：浮動、定位；  

一方面，浮動的種種複雜的佈局規則注定了它是一種試探性局部 reflow 式的佈局演算法。瀏覽器需要花費很多精力來處理它。另一方面，浮動元素的佈局牽涉到的因素更多。在同一佈局空間中，所有浮動元素均存在於“靜態層”之上的“浮動層”，不僅浮動層中的多個浮動元素會相互影響，浮動元素與靜態層也有互動。

7、css樣式前綴

標準化各種瀏覽器前綴，帶瀏覽器前綴的在前，標準的在後

8、css屬性值 

屬性值為0時，不加單位

屬性值為浮點數0.**時，可以省略小數點前的0 

#

以上是如何提升css效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！