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嵌入的其它样式文件。

图五. 在非IE浏览器中，LINK不会阻断@import 嵌入样式表。

多个@imports

这个使用多个@imports的例子展示在IE中使用@import会引起资源被按照一个不同于预期的顺序下载。这个例子有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中，它被首先下载。如果脚本中包含的代码以来从样式表文件中应用的样式(比如getElementsByClassName)， 那么就将可能会发生意外的结果，因为脚本先于样式被加载，尽管开发人员将其置于代码的最后面。

图六 @import在IE中引发资源文件的下载顺序被打乱

出处：前端观察
责任编辑：bluehearts

上一页 不要使用@import [1] 下一页 不要使用@import [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。