|
LINK嵌套@import
在這個LINK 嵌套@import 例子中，a.css 通過LINK插入到頁面中，然后a.css 通過@import規(guī)則來引入b.css:
HTML代碼:
<link rel='stylesheet' type='text/css' href='a.css' />
在a.css中:
@import url('b.css');
這種方式同樣阻止并行加載代碼，但是這次是對于所有的瀏覽器。其實這個應(yīng)該不會讓我們感到奇怪吧，簡單的想一下就能理解了。瀏覽器必須下載a.css先，并分析它，這個時候，瀏覽器發(fā)現(xiàn)了@import 規(guī)則，然后才會開始加載b.css.
圖三. 在在一個通過LINK加載的的樣式文件中使用@import將會在所有的瀏覽器里面打破并行下載。
LINK 阻斷 @import
上面的例子做一個細(xì)微的變化，IE中會引起驚人的結(jié)果：使用LINK導(dǎo)入a.css 和一個新的樣式文件proxy.css。proxy.css沒有添加額外的樣式，它只是用來通過@import 規(guī)則導(dǎo)入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中運(yùn)行的結(jié)果，LINK 阻斷@import，在圖四中顯示。第一個請求是HTML文檔。第二個請求是a.css (花了兩秒鐘)，第三個(很小) 的請求是proxy.css。第四個請求是b.css (也花費(fèi)了兩秒鐘)。令人震驚的是，在下載a.css完成之前，IE不會開始下載b.css。但是在其它所有的瀏覽器中，這種情況不會發(fā)生，結(jié)果頁面顯示的也比較快。如下圖五所示。
圖四. IE中，LINK 阻斷使用@import嵌入的其它樣式文件。
圖五. 在非IE瀏覽器中，LINK不會阻斷@import 嵌入樣式表。
多個@imports
這個使用多個@imports的例子展示在IE中使用@import會引起資源被按照一個不同于預(yù)期的順序下載。這個例子有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中，它被首先下載。如果腳本中包含的代碼以來從樣式表文件中應(yīng)用的樣式(比如getElementsByClassName)， 那么就將可能會發(fā)生意外的結(jié)果，因為腳本先于樣式被加載，盡管開發(fā)人員將其置于代碼的最后面。
圖六 @import在IE中引發(fā)資源文件的下載順序被打亂
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 不要使用@import [1] 下一頁 不要使用@import [3]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 不要使用@import [2]
