如何提高CSS性能，根據頁面的加載性能和CSS代碼性能，主要總結有下面幾點：

　　1、盡量將樣式寫在單獨的css文件里面，在head元素中引用

　　有時候為了圖方便或者快速搞定功能，我們可能會直接將樣式寫在頁面的style標簽或者直接內聯在元素上，這樣雖然簡單方便，但是非常不利于日后的維護。將代碼寫成單獨的css文件有幾點好處：

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

　　(2)減少頁面體積

　　(3)css文件可以被緩存、重用，維護成本降低

　　2、不使用@import

　　這條手段已經是眾所周知，這里簡單提一下，@import影響css文件的加載速度

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

　　有時候項目的模塊越來越多，功能越來越復雜，我們寫的CSS選擇器會內套多層，越來越復雜。

　　建議選擇器的嵌套最好不要超過三層，比如：

.header .logo .text{}

　　可以優化成

.haeder .logo-text{}

　　簡潔的選擇器不僅可以減少css文件大小，提高頁面的加載性能，瀏覽器解析時也會更加高效，也會提高開發人員的開發效率，降低了維護成本。

?

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

　　很多時候，我們會把所有的樣式文件合并成一個文件，但是這樣有一個問題：很多其他頁面的CSS同時引用到當前頁面中，而當前頁面并沒有用到它們，這種情況會造成兩個問題：

　　(1)樣式文件偏大，影響加載速度

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

　　正確的處理方法是根據當前頁面需要的css去合并那些當前頁面用到的CSS文件。

?

　　PS：合并成一個文件有一個優點：樣式文件會被瀏覽器緩存，進入到其他頁面樣式文件不用再去下載。這條規則應根據場景來區別對待，如果是大項目，應該合并成不同的樣式文件，如果是簡單的項目，建議合并成一個文件即可。如果無法確認項目規模，建議分開成不同的樣式文件，日后要合并也比較方便。

?

　　5、利用CSS繼承減少代碼量

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

　　常見的可以繼承的屬性比如：

　　color，font-size，font-family等等

　　不可繼承的比如：

　　position，display，float等

?

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

?

轉載于:https://www.cnblogs.com/mysun-shine/p/6434377.html

總結

以上是生活随笔為你收集整理的CSS 优化、提高性能的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。