頁面中的CSS效能最佳化

標籤：

大型網站中會有多個CSS檔案，效能最佳化是不要的。主要有以下幾個方法：

一：壓縮樣式表：

　　通過構建工具壓縮CSS檔案，能夠減少檔案的大小，從而得到更快的下載、解析和執行。對於使用前置處理器例如 Sass, Less, and Stylus, 你可以通過配置縮小編譯輸出的CSS代碼。

二：合并多個CSS檔案

　　因為每一個檔案就是一個HTTP請求，合并CSS檔案。檔案數量的減少就會帶來請求數量的減少和更快的頁面載入速度。

三：使用link標籤而不使用@inport

1 <link rel="stylesheet" href="style.css">2 @import url(‘style.css‘);

　　link與@import區別：

• link是XHTML標籤，而@import是CSS提供的一種方式。link處理載入CSS檔案還可以載入其他其他檔案，還可以定義rel串連屬性。而@import只能載入css
• 載入順序差別：當一個頁面被載入的時候，link引入的css檔案也會同時被載入。而@import引入的css檔案只有在頁面載入完成後才會載入。@import載入css會出現閃爍（頁面開始沒有樣式）。所以有時候瀏覽@import載入CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯（夢之都載入CSS的方式就是使用@import，我一邊下載一邊瀏覽夢之都網頁時，就會出現上述問題）。
• 相容性的差別。由於@import是CSS2.1提出的所以老的瀏覽器不支援，@import只有在IE5以上的才能識別，而link標籤無此問題。
• 使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的。

 

頁面中的CSS效能最佳化