|
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 同樣能保證資源按照開發(fā)人員制定的順序下載。
圖七：使用LINK確保在所有的瀏覽器里面都能并行下載
這些問題都需要考慮到IE。它非常不好的地方是，資源文件可能會在個別地方結(jié)束下載，所有瀏覽器在下載樣式文件的時候應(yīng)該執(zhí)行一些前瞻以導(dǎo)入所有的@import規(guī)則并立即下載它們（通過@import導(dǎo)入的樣式）。知道所有的瀏覽器都變成這種方式，我都會推薦避免使用@import并一直使用LINK 來插入樣式。
更多測試
根據(jù)讀者的反饋，原作者增加了兩項測試：使用@imports的LINK 和多個LINKs，每個例子都插入4個樣式文件到HTML文件中。使用@imports的LINK 使用LINK 加載proxy.css，然后proxy.css 使用@import 加載4個樣式文件。多個LINKs的例子，在HTML文件中有4個LINK 標(biāo)簽來引入4個樣式文件(這正是我推薦的方法)。這兩個HTTP 瀑布圖如圖八和圖九所示：
圖八：使用@imports的LINK
圖九：多個LINK
看一下使用 @imports的LINK 的演示 ， 第一個問題是在proxy.css加載完成之前這四個樣式文件不會開始下載，這在所有的瀏覽器里面一樣。另一方面，多個LINK的顏色立即同時下載這些樣式文件。
第二個問題是IE改變下載順序。我在頁面的代碼的最底部添加了一個10秒的腳本（圖中最長的條條）。在所有的非IE瀏覽器中，@import樣式文件(proxy.css文件中引入) 首先下載，然后才是腳本文件，嚴(yán)格的按照指定的順序。然而，在IE中，腳本卻先于@import 樣式被插入，正如例子使用@imports的LINK 在圖八中顯示的那樣。這會導(dǎo)致樣式文件花費更多的時間來下載，因為，在IE6和IE7中，它們還要等到長腳本用光僅有的兩個可用連接中的一個。然而在樣式文件沒有下載完之前，IE不會在頁面中渲染任何內(nèi)容，以這種方式來使用@import會引起頁面保持空白長達(dá)12秒鐘。使用LINK 替代@import 可以保持加載順序，正如圖九中顯示的 多個LINK 那樣。這樣的話，頁面渲染只需要四秒鐘。
頁面資源的加載時間被夸張的用來簡單的查看發(fā)生了什么事情。但是對于那些使用窄帶或網(wǎng)速比較慢的用戶來說，特別是那些新興的市場，這些響應(yīng)時間可能有些遠(yuǎn)離實際。
- 在一個樣式文件中使用@import會為頁面總體加載時間增加更多一個返程（也就是增加頁面的總體加載時間）
- 在IE中使用@import 將會引起文件的下載順序被改變。這更會引起樣式文件花費更長的時間來下載，這會阻礙頁面的渲染，讓人感到頁面比較慢。
本文作者 Steve Souders 為《高性能網(wǎng)站設(shè)計》一書的作者，他是Yahoo網(wǎng)站性能團(tuán)隊的前領(lǐng)導(dǎo)人，目前效力于Google公司。他同時還是Firebug工作組的聯(lián)合創(chuàng)立者，以及知名的網(wǎng)站性能分析工具的YSlow的創(chuàng)作者——前端觀察
本文鏈接：http://m.95time.cn/tech/web/2009/6666.asp 
出處：前端觀察
責(zé)任編輯：bluehearts
上一頁 不要使用@import [2] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 不要使用@import [3]
