不要使用@import[译]（3）

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 来插入样式。

更多测试

根据读者的反馈，原作者增加了两项测试：使用@imports的LINK 和多个LINKs，每个例子都插入4个样式文件到HTML文件中。使用@imports的LINK 使用LINK 加载proxy.css，然后proxy.css 使用@import 加载4个样式文件。多个LINKs的例子，在HTML文件中有4个LINK 标签来引入4个样式文件(这正是我推荐的方法)。这两个HTTP 瀑布图如图八和图九所示：

图八：使用@imports的LINK

图九：多个LINK

看一下使用 @imports的LINK 的演示 ， 第一个问题是在proxy.css加载完成之前这四个样式文件不会开始下载，这在所有的浏览器里面一样。另一方面，多个LINK的颜色立即同时下载这些样式文件。

第二个问题是IE改变下载顺序。我在页面的代码的最底部添加了一个10秒的脚本（图中最长的条条）。在所有的非IE浏览器中，@import样式文件(proxy.css文件中引入) 首先下载，然后才是脚本文件，严格的按照指定的顺序。然而，在IE中，脚本却先于@import 样式 * 入，正如例子使用@imports的LINK 在图八中显示的那样。这会导致样式文件花费更多的时间来下载，因为，在IE6和IE7中，它们还要等到长脚本用光仅有的两个可用连接中的一个。然而在样式文件没有下载完之前，IE不会在页面中渲染任何内容，以这种方式来使用@import会引起页面保持空白长达12秒钟。使用LINK 替代@import 可以保持加载顺序，正如图九中显示的 多个LINK 那样。这样的话，页面渲染只需要四秒钟。

页面资源的加载时间被夸张的用来简单的查看发生了什么事情。但是对于那些使用窄带或网速比较慢的用户来说，特别是那些新兴的市场，这些响应时间可能有些远离实际。

• 在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程（也就是增加页面的总体加载时间）

• 在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载，这会阻碍页面的渲染，让人感到页面比较慢。

本文作者 Steve Souders 为《高性能网站设计》一书的作者，他是Yahoo网站性能团队的前领导人，目前效力于Google公司。他同时还是Firebug工作组的联合创立者，以及知名的网站性能分析工具的YSlow的创作者——前端观察