不要使用@import進(jìn)行高性能網(wǎng)站設(shè)計(jì)

時(shí)間：2022-08-15 19:39:01 | 來源：建站知識(shí)

時(shí)間：2022-08-15 19:39:01 來源：建站知識(shí)

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

LINK vs. @import

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

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

或者使用@import 方法：

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

我更喜歡使用LINK，因?yàn)樗容^簡(jiǎn)單——而如果使用@import的話，你必須時(shí)刻記得要將@import放到樣式代碼的最前面，否則它將會(huì)不起作用。而且事實(shí)證明，避免使用@import 同樣對(duì)網(wǎng)站性能有益。

@import @import

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

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

如果你一直這種方式使用@import，那么就沒有什么性能問題，盡管這可能會(huì)因?yàn)楦?jìng)態(tài)條件而可能引起JavaScript錯(cuò)誤。兩個(gè)樣式文件將同時(shí)并行下載，就像在圖一中顯示的那樣(第一個(gè)小的請(qǐng)求是HTML該文件) 。問題出現(xiàn)在當(dāng)@import嵌套入其它樣式中或者和LINK聯(lián)合使用的時(shí)候。

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

LINK @import

這個(gè)LINK @import的例子使用LINK加載a.css，使用@import導(dǎo)入b.css:

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

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

圖二. 在IE中l(wèi)ink混合@import 會(huì)破壞并行下載

LINK嵌套@import

在這個(gè)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');

這種方式同樣阻止并行加載代碼，但是這次是對(duì)于所有的瀏覽器。其實(shí)這個(gè)應(yīng)該不會(huì)讓我們感到奇怪吧，簡(jiǎn)單的想一下就能理解了。瀏覽器必須下載a.css先，并分析它，這個(gè)時(shí)候，瀏覽器發(fā)現(xiàn)了@import 規(guī)則，然后才會(huì)開始加載b.css.

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

LINK 阻斷 @import

上面的例子做一個(gè)細(xì)微的變化，IE中會(huì)引起驚人的結(jié)果：使用LINK導(dǎo)入a.css 和一個(gè)新的樣式文件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');

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

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

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

多個(gè)@imports

這個(gè)使用多個(gè)@imports的例子展示在IE中使用@import會(huì)引起資源被按照一個(gè)不同于預(yù)期的順序下載。這個(gè)例子有6個(gè)樣式表(每個(gè)將花兩秒鐘的下載時(shí)間)以及后面跟著一個(gè)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>

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

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

LINK LINK

使用LINK來引入樣式更簡(jiǎn)單和安全：

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

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

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

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

更多測(cè)試

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

圖八：使用@imports的LINK

圖九：多個(gè)LINK

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

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

頁面資源的加載時(shí)間被夸張的用來簡(jiǎn)單的查看發(fā)生了什么事情。但是對(duì)于那些使用窄帶或網(wǎng)速比較慢的用戶來說，特別是那些新興的市場(chǎng)，這些響應(yīng)時(shí)間可能有些遠(yuǎn)離實(shí)際。

在一個(gè)樣式文件中使用@import會(huì)為頁面總體加載時(shí)間增加更多一個(gè)返程(也就是增加頁面的總體加載時(shí)間)

在IE中使用@import 將會(huì)引起文件的下載順序被改變。這更會(huì)引起樣式文件花費(fèi)更長的時(shí)間來下載，這會(huì)阻礙頁面的渲染，讓人感到頁面比較慢。

文章來自：www.cn8f.com