高性能CSS(一）

避免使用@import

有兩種方式加載樣式文件，一種是link元素，另外一種是CSS 2.1加入@import。而在外部的CSS文件中使用@import會使得頁面在加載時增長額外的延遲。雖然規則容許在樣式中調用@import來導入其它的CSS，但瀏覽器不能並行下載樣式，就會致使頁面增添了額外的往返耗時。好比，第一個CSS文件first.css包含了如下內容：@import url(「second.css」)。那麼瀏覽器就必須先把first.css下載、解析和執行後，才發現及處理第二個文件second.css。簡單的解決方法是使用<link>標記來替代@import ，好比下面的寫法就可以並行下載CSS文件，從而加快頁面加載速度：

<link rel="stylesheet" href=""first.css"" />
<link rel="stylesheet" href="second.css" />

須要注意的是一個頁面中的CSS文件不宜過多，不然應該簡化及合併外部的CSS文件以節省往返請求時間(RTT)提高頁面加載速度。