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中link混合@import 会破坏并行下载

LINK嵌套@import

在这个LINK 嵌套@import 例子中，a.css 通过LINK插入到页面中，然后a.css 通过@import规则来引入b.css:

HTML代码:

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

在a.css中:

@import url('b.css');

这种方式同样阻止并行加载代码，但是这次是对于所有的浏览器。其实这个应该不会让我们感到奇怪吧，简单的想一下就能理解了。浏览器必须下载a.css先，并分析它，这个时候，浏览器发现了@import 规则，然后才会开始加载b.css.

图三. 在在一个通过LINK加载的的样式文件中使用@import将会在所有的浏览器里面打破并行下载。

LINK 阻断 @import

上面的例子做一个细微的变化，IE中会引起惊人的结果：使用LINK导入a.css 和一个新的样式文件proxy.css。proxy.css没有添加额外的样式，它只是用来通过@import 规则导入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中运行的结果，LINK 阻断@import，在图四中显示。第一个请求是HTML文档。第二个请求是a.css (花了两秒钟)，第三个(很小) 的请求是proxy.css。第四个请求是b.css (也花费了两秒钟)。令人震惊的是，在下载a.css完成之前，IE不会开始下载b.css。但是在其它所有的浏览器中，这种情况不会发生，结果页面显示的也比较快。如下图五所示。

图四. IE中，LINK 阻断使用@import嵌入的其它样式文件。