Web前端性能優化——CSS優化

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);
    }
}