图五. 在非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中引发资源文件的下载顺序被打乱

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 同样能保证资源按照开发人员制定的顺序下载。

图七：使用LINK确保在所有的浏览器里面都能并行下载

这些问题都需要考虑到IE。它非常不好的地方是，资源文件可能会在个别地方结束下载，所有浏览器在下载样式文件的时候应该执行一些前瞻以导入所有的@import规则并立即下载它们(通过@import导入的样式)。知道所有的浏览器都变成这种方式，我都会推荐避免使用@import并一直使用LINK 来插入样式。