|
Translate From：stevesouders
原文：高性能網(wǎng)站設計：不要使用@import
在高性能網(wǎng)站設計的第五章，我簡要的提到@import 對于網(wǎng)站的性能有某些負面的影響，然后我在 Web 2.0 Expo 的演講上深入探討了這個問題，并創(chuàng)建了一些測試頁面和HTTP瀑布狀圖表，這些在下面將會用到。對于這個問題的底線是：如果你想樣式表并行載入，以使頁面更快，請使用LINK 替代@import。
LINK vs. @import
大家都知道，有兩種方法可以在你的頁面中導入樣式文件。你可以使用LINK標簽:
<link rel='stylesheet' href='a.css' />
或者使用@import 方法：
<style>
@import url('a.css');
</style>
我更喜歡使用LINK，因為它比較簡單——而如果使用@import的話，你必須時刻記得要將@import放到樣式代碼的最前面，否則它將會不起作用。而且事實證明，避免使用@import 同樣對網(wǎng)站性能有益。
@import @import
我將探究LINK和@import兩種方式的不同。在這些例子中，有兩個樣式表: a.css和b.css。每個樣式表都配置為需要花費兩秒鐘來下載，這樣就比較容易的看出來它們對網(wǎng)站性能的影響。第一個例子使用@import 導入兩個樣式文件。這個例子，我們稱之為@import @import，HTML代碼可以寫成這個樣子：
<style>
@import url('a.css');
@import url('b.css');
</style>
如果你一直這種方式使用@import，那么就沒有什么性能問題，盡管這可能會因為競態(tài)條件而可能引起JavaScript錯誤。兩個樣式文件將同時并行下載，就像在圖一中顯示的那樣(第一個小的請求是HTML該文件) 。問題出現(xiàn)在當@import嵌套入其它樣式中或者和LINK聯(lián)合使用的時候。
圖一：一直使用@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中l(wèi)ink混合@import 會破壞并行下載
出處：前端觀察
責任編輯：bluehearts
上一頁 下一頁 不要使用@import [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 不要使用@import [1]
第 2 頁 
