CSS设计制作网页不要使用@import
在的第五章，我简要的提到@import 对于网站的性能有某些负面的影响，然后我在的演讲上深入探讨了这个问题，并创建了一些测试页面和HTTP瀑布状图表，这些在下面将会用到。对于这个问题的底线是：如果你想样式表并行载入，以使页面更快，请使用LINK 替代@import。
图六 @import在IE中引发资源文件的下载顺序被打乱
LINK LINK
使用LINK来引入样式更简单和安全：
使用LINK 可确保样式在所有浏览器里面都能被并行下载。这个的例子演示了这一点，就像在图七中显示的那样。使用LINK 同样能保证资源按照开发人员制定的顺序下载。
图八：使用@imports的LINK
图九：多个LINK
看一下的演示， 第一个问题是在proxy.css加载完成之前这四个样式文件不会开始下载，这在所有的浏览器里面一样。另一方面，的颜色立即同时下载这些样式文件。
第二个问题是IE改变下载顺序。我在页面的代码的最底部添加了一个10秒的脚本（图中最长的条条）。在所有的非IE浏览器中，@import样式文件(proxy.css文件中引入) 首先下载，然后才是脚本文件，严格的按照指定的顺序。然而，在IE中，脚本却先于@import 样式被插入，正如例子在图八中显示的那样。这会导致样式文件花费更多的时间来下载，因为，在IE6和IE7中，它们还要等到长脚本用光仅有的两个可用连接中的一个。然而在样式文件没有下载完之前，IE不会在页面中渲染任何内容，以这种方式来使用@import会引起页面保持空白长达12秒钟。使用LINK 替代@import 可以保持加载顺序，正如图九中显示的那样。这样的话，页面渲染只需要四秒钟。
页面资源的加载时间被夸张的用来简单的查看发生了什么事情。但是对于那些使用窄带或网速比较慢的用户来说，特别是那些新兴的市场，这些响应时间可能有些远离实际。
-
在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程（也就是增加页面的总体加载时间）
-
在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载，这会阻碍页面的渲染，让人感到页面比较慢。
本文作者为《高性能网站设计》一书的作者，他是Yahoo网站性能团队的前领导人，目前效力于Google公司。他同时还是Firebug工作组的联合创立者，以及知名的网站性能分析工具的YSlow的创作者——前端观察
