HTML 使用 @import

TLNR

1. <link> 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。
2. 页面被加载时，<link> 引用的 CSS 会同时被加载；@import 会等页面「全部被下载完」再被加载。
3. 使用 @import 必须将它放到样式代码的最前面，否则不起作用。
4. html 同時使用到 <link> 和 @import，在 IE 中，會影響並行下載。
5. 使用 <link> 內嵌 @import，在「所有浏览器」都「不能並行下載」。

---

HTML 使用 @import 和 <link> 區別

http://www.dreamdu.com/blog/2007/05/11/css_link_import/

1. <link> 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。
2. 页面被加载时，<link> 引用的 CSS 会同时被加载；@import 会等到页面「全部被下载完」再被加载。
3. 使用 javaScript 控制 dom 的时候，只能使用 <link> 标签，因为 @import 不是 dom。
4. 兼容性的差别。@import 是 CSS2.1 提出的，IE5 以後才能识别，而 <link> 标签无此问题。
5. 在 css 中可以 @import(引入) 其他样式表，但這樣會產生过多的 HTTP 请求。

---

高性能网站设计：不要使用 @import

29 April 2009

作者測試 <link> vs. @import兩個方式載入相同的檔案，並用 develop-tool 觀察兩個方式的效能。 網站文章有圖和中文說明，文字有連結，點入可以進入測試網站，用 developBar 的 Network 檢視狀況！

A. 使用 @import：@import @import

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

• 全部都使用 @import 是可以的

B. 同時用 <link> 和 @import：link @import

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

• 在 IE 中 <link> 與 @import 不能同時下载，在 IE 中 (在 6, 7, 和 8 中测试过) 須逐個下載。

// @import 會等到页面「全部被下载完再被加载」

---

C. 使用 <link> 內嵌 @import：link with @import

<!-- html -->
<link href="a.css" rel="stylesheet" type="text/css">

/* a.css */
@import url('b.css');

• 所有浏览器都不能並行下載。

// 因為是內砍，會先做完自身第一層，再做 @import 第二層？ // 浏览器必须下载 "a.css" 先、分析它，这个时候，浏览器发现了 @import 规则。下載完 "a.css" 后才会开始加载 "b.css"。

D. 同時用 <link> 和 <link> 內嵌 @import：link blocks @import

<!-- html -->
<link href="a.css" rel="stylesheet" type="text/css">  
<link href="proxy.css" rel="stylesheet" type="text/css">

/* proxy.css */
@import url('b.css');

• 在 IE 中运行的结果，會出現三個請求：
  • 第一个请求是 HTML 文档。
  • 第二个请求是 a.css (花了两秒钟)，
  • 第三个(很小) 的请求是 proxy.css。
  • 第四个请求是 b.css (也花费了两秒钟)，但它等到 a.css 下載「完成後」才開始下載，同上面 C. 的測試。
• 但是在其它浏览器，这种情况不会发生

---

E. 多個 @import：many @imports

<!-- html -->
<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 src="one.js" type="text/javascript"></script>

这个例子有 6 个样式表 (每个将花两秒钟的下载时间)；
后面跟着一个 js 脚本文件 (需要四苗种下载)，但在 IE 中，它被首先下载。

• 在 IE 中使用 @import 会以不同於预期的顺序下载。

F. 多個 <link>：link link

<!-- html -->
<link href="a.css" rel="stylesheet" type="text/css">  
<link href="b.css" rel="stylesheet" type="text/css">

• 使用 <link> 确保在所有的浏览器里面都能并行下载，也能按照开发人员制定的顺序下载

---

<link> 內嵌多個 @import 和直接用多个 <link> 載入檔案比較， 每个例子都插入 4 个样式文件到 HTML 文件中。

G. <link> 內嵌多個 @import：link with @imports

html 中使用 <link> 加载 "proxy.css"

<!-- html -->
<link href="proxy.css" rel="stylesheet" type="text/css">

proxy.css 中使用 @import 加载 4 个样式文件。

/* proxy.css */
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');

H. 直接用多个 <link>：many links

<!-- html -->
<link href="a.css" rel="stylesheet" type="text/css"> 
<link href="b.css" rel="stylesheet" type="text/css"> 
<link href="c.css" rel="stylesheet" type="text/css"> 
<link href="d.css" rel="stylesheet" type="text/css">

問題 1.

• 在 G. 中，在 "proxy.css" 加载完成之前，这四个样式文件不会开始下载，这在所有的浏览器里面一样。
• 在 H. 中，<link> 是立即同时下载。

問題 2.

• 在 IE 會改变下载顺序。

我在页面最底部添加了一个 10 秒的脚本（图中最长的条条）。

在「非 IE 」浏览器： @import 样式文件 ( "proxy.css" 文件中引入) 首先下载，然后才是脚本文件，严格的按照指定的顺序。

在 IE： 脚本却先于 @import 样式被下載，如前面例子那样。 然而在样式文件没有下载完之前，IE 不会在页面中渲染任何内容。 以这种方式来使用 @import 12 秒钟。 使用 <link> 替代 @import，页面渲染只需要 4 秒钟。