1、避免使用 @import

@import 最常見的用法是把所有的 CSS 文件通過 @import 鏈接到一個 CSS 文件中，如 main.css

這樣往往會導致嵌套的發生，就是被 import 的文件也通過 @import 鏈接其他 CSS 文件。

這樣的結果會導致頁面加載變慢。

（參考：http://www.gbtags.com/gb/share/1441.htm）

2、盡可能使用 CSS 動畫

使用 CSS3 中的 transformation 和 keyframe 制作動畫效果相比使用 JS 會更高效，同時需要的代碼也更少。當然，對于不支持 CSS3 的瀏覽器，就得使用 JS 實現動畫效果了。

（參考：http://www.gbtags.com/gb/share/1374.htm）

3、在 CSS 文件中包含多種介質類型

將所有的介質合并在一個文件中，以減少請求的次數，除非其中一個介質所占的比例比起其他大了許多。

@media screen{/*所有默認的結構設計和元素樣式寫在這里*/ } @media print{/*調整打印時的樣式*/ } @media only screen and (max-width: 1024px){/*使用移動終端時的樣式設定*/ }
（參考：http://www.gbtags.com/gb/share/1448.htm）

4、使用媒體查詢加載指定大小的背景圖片

利用 @media CSS媒體查詢來改變背景圖片，使得不同的媒體設備對應不同的背景圖片，提升用戶體驗 。

/*默認圖片*/ .someElement {background-image: url(someImg.jpg); }@media only screen and (max-width: 1024px){.someElement{background-image: url(otherImg.jpg);} }

總結

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

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