在高性能網站設計的第五章，我簡要的提到@import 對于網站的性能有某些負面的影響，然后我在 Web 2.0 Expo 的演講上深入探討了這個問題，并創建了一些測試頁面和HTTP瀑布狀圖表，這些在下面將會用到。對于這個問題的底線是：如果你想樣式表并行載入，以使頁面更快，請使用LINK 替代@import。

LINK vs. @import

大家都知道，有兩種方法可以在你的頁面中導入樣式文件。你可以使用LINK標簽:

?<link rel='stylesheet' href='a.css' />

或者使用@import 方法：

<style>
@import url('a.css');
</style>

我更喜歡使用LINK，因為它比較簡單——而如果使用@import的話，你必須時刻記得要將@import放到樣式代碼的最前面，否則它將會不起作用。而且事實證明，避免使用@import 同樣對網站性能有益。

@import @import

我將探究LINK和@import兩種方式的不同。在這些例子中，有兩個樣式表: a.css和b.css。每個樣式表都配置為需要花費兩秒鐘來下載，這樣就比較容易的看出來它們對網站性能的影響。第一個例子使用@import 導入兩個樣式文件。這個例子，我們稱之為@import @import，HTML代碼可以寫成這個樣子：

<style>
@import url('a.css');
@import url('b.css');
</style>

如果你一直這種方式使用@import，那么就沒有什么性能問題，盡管這可能會因為競態條件而可能引起JavaScript錯誤。兩個樣式文件將同時并行下載，就像在圖一中顯示的那樣(第一個小的請求是HTML該文件) 。問題出現在當@import嵌套入其它樣式中或者和LINK聯合使用的時候。

圖一：一直使用@import 是可以的

LINK @import

這個LINK @import的例子使用LINK加載a.css，使用@import導入b.css:

<link rel='stylesheet' type='text/css' href='a.css' />
<style>
@import url('b.css');
</style>

在IE中(在6, 7, 和8中測試過)，這會導致樣式表文件逐個加載，正如圖二所示。并行下載資源是加速頁面的一個關鍵。就像圖示的那樣，這種方法在IE中會導致頁面需要更多的時間才能加載完成。

圖二. 在IE中link混合@import 會破壞并行下載

LINK嵌套@import

在這個LINK 嵌套@import 例子中，a.css 通過LINK插入到頁面中，然后a.css 通過@import規則來引入b.css:

HTML代碼:

<link rel='stylesheet' type='text/css' href='a.css' />

在a.css中:

?@import url('b.css');

這種方式同樣阻止并行加載代碼，但是這次是對于所有的瀏覽器。其實這個應該不會讓我們感到奇怪吧，簡單的想一下就能理解了。瀏覽器必須下載a.css先，并分析它，這個時候，瀏覽器發現了@import 規則，然后才會開始加載b.css.

圖三. 在在一個通過LINK加載的的樣式文件中使用@import將會在所有的瀏覽器里面打破并行下載。

LINK 阻斷 @import

上面的例子做一個細微的變化，IE中會引起驚人的結果：使用LINK導入a.css 和一個新的樣式文件proxy.css。proxy.css沒有添加額外的樣式，它只是用來通過@import 規則導入b.css.

HTML代碼如下：

<link rel='stylesheet' type='text/css' href='a.css' />
<link rel='stylesheet' type='text/css' href='proxy.css'>

proxy.css的代碼:

@import url('b.css');

這個例子在IE中運行的結果，LINK 阻斷@import，在圖四中顯示。第一個請求是HTML文檔。第二個請求是a.css (花了兩秒鐘)，第三個(很小) 的請求是proxy.css。第四個請求是b.css (也花費了兩秒鐘)。令人震驚的是，在下載a.css完成之前，IE不會開始下載b.css。但是在其它所有的瀏覽器中，這種情況不會發生，結果頁面顯示的也比較快。如下圖五所示。

圖四. IE中，LINK 阻斷使用@import嵌入的其它樣式文件。

圖五. 在非IE瀏覽器中，LINK不會阻斷@import 嵌入樣式表。

多個@imports

這個使用多個@imports的例子展示在IE中使用@import會引起資源被按照一個不同于預期的順序下載。這個例子有6個樣式表(每個將花兩秒鐘的下載時間)以及后面跟著一個js腳本文件(需要四苗種下載)。

<style>
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
</style>
<script type="text/javascript" src="one.js"></script>

看一下圖六，最長的條條是耗時四秒鐘的腳本。盡管它在代碼里面被列在最后，但是在IE中，它被首先下載。如果腳本中包含的代碼以來從樣式表文件中應用的樣式(比如getElementsByClassName)， 那么就將可能會發生意外的結果，因為腳本先于樣式被加載，盡管開發人員將其置于代碼的最后面。

LINK LINK

使用LINK來引入樣式更簡單和安全：

<link rel='stylesheet' type='text/css' href='a.css' />
<link rel='stylesheet' type='text/css' href='b.css'>

使用LINK 可確保樣式在所有瀏覽器里面都能被并行下載。這個LINK LINK的例子演示了這一點，就像在圖七中顯示的那樣。使用LINK 同樣能保證資源按照開發人員制定的順序下載。

圖七：使用LINK確保在所有的瀏覽器里面都能并行下載

這些問題都需要考慮到IE。它非常不好的地方是，資源文件可能會在個別地方結束下載，所有瀏覽器在下載樣式文件的時候應該執行一些前瞻以導入所有的@import規則并立即下載它們（通過@import導入的樣式）。知道所有的瀏覽器都變成這種方式，我都會推薦避免使用@import并一直使用LINK 來插入樣式。

更多測試

根據讀者的反饋，原作者增加了兩項測試：使用@imports的LINK 和多個LINKs，每個例子都插入4個樣式文件到HTML文件中。使用@imports的LINK 使用LINK 加載proxy.css，然后proxy.css 使用@import 加載4個樣式文件。多個LINKs的例子，在HTML文件中有4個LINK 標簽來引入4個樣式文件(這正是我推薦的方法)。這兩個HTTP 瀑布圖如圖八和圖九所示：

圖八：使用@imports的LINK

圖九：多個LINK

看一下使用 @imports的LINK 的演示 ， 第一個問題是在proxy.css加載完成之前這四個樣式文件不會開始下載，這在所有的瀏覽器里面一樣。另一方面，多個LINK的顏色立即同時下載這些樣式文件。

第二個問題是IE改變下載順序。我在頁面的代碼的最底部添加了一個10秒的腳本（圖中最長的條條）。在所有的非IE瀏覽器中，@import樣式文件(proxy.css文件中引入) 首先下載，然后才是腳本文件，嚴格的按照指定的順序。然而，在IE中，腳本卻先于@import 樣式被插入，正如例子使用@imports的LINK 在圖八中顯示的那樣。這會導致樣式文件花費更多的時間來下載，因為，在IE6和IE7中，它們還要等到長腳本用光僅有的兩個可用連接中的一個。然而在樣式文件沒有下載完之前，IE不會在頁面中渲染任何內容，以這種方式來使用@import會引起頁面保持空白長達12秒鐘。使用LINK 替代@import 可以保持加載順序，正如圖九中顯示的 多個LINK 那樣。這樣的話，頁面渲染只需要四秒鐘。

頁面資源的加載時間被夸張的用來簡單的查看發生了什么事情。但是對于那些使用窄帶或網速比較慢的用戶來說，特別是那些新興的市場，這些響應時間可能有些遠離實際。

• 在一個樣式文件中使用@import會為頁面總體加載時間增加更多一個返程（也就是增加頁面的總體加載時間）
• 在IE中使用@import 將會引起文件的下載順序被改變。這更會引起樣式文件花費更長的時間來下載，這會阻礙頁面的渲染，讓人感到頁面比較慢。

本文作者 Steve Souders?為《高性能網站設計》一書的作者，他是Yahoo網站性能團隊的前領導人，目前效力于Google公司。他同時還是Firebug工作組的聯合創立者，以及知名的網站性能分析工具的YSlow的創作者——前端觀察

圖六 @import在IE中引發資源文件的下載順序被打亂

總結

以上是生活随笔為你收集整理的CSS中通过import方式导入的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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