不要使用@import

原文：http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
猫鱼：本猫的英文水平有限，只能翻译个大概，如果有错误，请指正，万分感谢。

don’t use @import
                        April 9, 2009 12:32 AM

In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo,creatingseveral test pages and HTTP waterfall charts, all shown below.Thebottomline is: use LINK instead of @import if you want stylesheetstodownload in parallel resulting in a faster page.
在《高性能网站》的第5章，我曾经简要介绍了@import对于网站性能的负面影响。而在Web2.0博览会上，我深入讨论了这个问题，建立了几个测试页面和HTTP瀑布图，在本文下面列出。底线是：如果你想样式表平行下载的更快，那么使用<link>而不是@import。

LINK vs. @import

There are two ways to include a stylesheet in your web page.
有两种方式将样式表引入到页面内。

You can use the LINK tag:
你可以使用<link>标签：

复制内容到剪贴板

代码:

<link rel='stylesheet' href='a.css'>

Or you can use the @import rule:
或者使用@import规则：

复制内容到剪贴板

代码:

<style>
@import url('a.css');
</style>

Iprefer using LINK for simplicity—you have to remember to put@import atthe top of the style block or else it won’t work. It turnsout thatavoiding @import is better for performance, too.
我喜欢使用<link>因为它简单——你必须记得把@import放在样式块的最头部它才能正常工作。事实证明，避免使用@import可以获得更好的性能。


@import @import

I’m going to walk through the different ways LINK and @import canbeused. In these examples, there are two stylesheets: a.css andb.css.Each stylesheet is configured to take two seconds to download tomakeit easier to see the performance impact. The first example uses@import to pull in these two stylesheets. In this example, called @import @import, the HTML document contains the following style block:
我要通过不同的方式来使用<link>和@import。在这个例子中，有两个样式表“a.css”和“b.css”。每个样式表配置采取两秒钟下载以更容易看到对性能的影响。第一个例子使用@import来载入这两个样式表。本例称为@import @import,HTML文档包含下述样式表：

复制内容到剪贴板

代码:

<style>
@import url('a.css');
@import url('b.css');
</style>

Ifyou always use @import in this way, there are no performanceproblems,although we’ll see below it could result in JavaScript errorsdue torace conditions. The two stylesheets are downloaded in parallel,asshown in Figure 1. (The first tiny request is the HTML document.)Theproblems arise when @import is embedded in other stylesheets or isusedin combination with LINK.
如果你全部使用@import，则没有任何性能问题，但我们会看到它下面可能导致JavaScript错误，由于比赛条件。这两个样式表平行下载，如图1所示。（第1个小的请求是HTML文档）问题出现在@import包含在其他的样式表中或者和<link>结合使用的时候。


Figure 1. always using @import is okay
图1. 全部使用@import则没有问题


LINK @import

The LINK @import example uses LINK for a.css, and @import for b.css:
“LINK @import”示例使用<link>链接a.css，使用@import链接b.css：

复制内容到剪贴板

代码:

<link rel='stylesheet' type='text/css' href='a.css'>
<style>
@import url('b.css');
</style>

InIE (tested on 6, 7, and 8), this causes the stylesheets to bedownloadedsequentially, as shown in Figure 2. Downloading resources inparallel iskey to a faster page. As shown here, this behavior in IE causes thepage to take a longer time to finish.
在IE内（包括6、7、8版本），样式表的下载顺序如图2所示。资源的并行下载是加快网页的关键。因此由图2可见，在IE内网页需要较长时间才能完成。


Figure 2. link mixed with @import breaks parallel downloads in IE
图2. <link>和@import混合使用在IE内会破坏并行下载


LINK with @import

In the LINK with @import example, a.css is inserted using LINK, and a.css has an @import rule to pull in b.css:
在“LINK with @import”示例中，a.css文件通过<link>引入文档，而a.css中使用@import规则导入b.css：

in the HTML document:
HTML文档包含：

复制内容到剪贴板

代码:

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

in a.css:
a.css包含：

复制内容到剪贴板

代码:

@import url('b.css');

Thispattern also prevents the scripts from loading in parallel, butthistime it happens on all browsers. When we stop and think about it,weshouldn’t be too surprised. The browser has to download a.css andparseit. At that point, the browser sees the @import rule and startsto fetchb.css.
这种方式也会阻止脚本的并行载入，并且是在所有的浏览器中。停下来想想，也不难理解。浏览器先下载a.css，然后才解读到@import规则然后再下载b.css。



Figure 3. using @import from within a LINKed stylesheet breaks parallel downloads in all browsers
图3. 所有浏览器内，通过<link>链接的样式表内使用@import规则会阻止并行下载


LINK blocks @import

A slight variation on the previous example with surprising resultsinIE: LINK is used for a.css and for a new stylesheet called proxy.css.proxy.css is configured to return immediately; it containsan @importrule for b.css.
对上例进行稍微的改变，在IE内的结果却很惊人：a.css通过<link>链接，同时再链接一个新的样式表文件proxy.css，proxy.css立即返回；它通过@import规则导入了b.css。

in the HTML document:
HTML文档包含：

复制内容到剪贴板

代码:

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

in proxy.css:
proxy.css包含：

复制内容到剪贴板

代码:

@import url('b.css');

The results of this example in IE, LINK blocks @import,areshown in Figure 4. The first request is the HTML document. The secondrequest is a.css (two seconds). The third (tiny) request isproxy.css.The fourth request is b.css (two seconds). Surprisingly, IE won’t startdownloading b.css until a.css finishes. In all other browsers, thisblocking issue doesn’t occur, resulting in a faster pages shown inFigure 5.
在IE中“LINK blocks @import”这个例子的结果如图4所示。第1个请求是HTML文档，第2个请求是a.css（2秒）。第3个请求（很短）是proxy.css。第4个请求是b.css（2秒）。令人惊讶的是，IE在a.css没有下载完成前不会开始下载b.css。在其他的浏览器内，不会出现这种封锁现象，其页面更快，如图5所示。



Figure 4. LINK blocks @import embedded in other stylesheets in IE
图4. 在IE内，<link>会阻碍其他样式表文件内通过 @import 嵌入的样式文件的并行下载


Figure 5. LINK doesn't block @import embedded stylesheets in browsers other than IE
图5. 非IE浏览器内，<link>不会阻碍其他样式表文件内通过@import嵌入的样式文件的下载

many @imports

The many @importsexample shows that using @import in IE causes resources to bedownloaded in a different order than specified. This example has sixstylesheets (each takes two seconds to download) followed by a script(afour second download).
“many @imports“示例表明，使用 @import 在IE中导致资源有不同的下载顺序。这个例子有6个样式表文件（每个需要下载2秒）其次是1个脚本（需要下载4秒）。

复制内容到剪贴板

代码:

<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 src='one.js' type='text/javascript'></script>

Lookingat Figure 6, the longest bar is the four second script. Even though itwas listed last, it gets downloaded first in IE. If the script containscode that depends on the styles applied from the stylesheets (a lagetElementsByClassName, etc.), then unexpected results may occurbecause the script is loaded before the stylesheets,despite thedeveloper listing it last.
通过图6可以发现最长的进度条是4秒的脚本，虽然它列在最后，但是在IE内会首先加载。如果这个脚本中有依赖样式表中的样式的应用（例如 getElementsByClassName )，那么可能出现不可预期的结果，因为脚本在样式表之前被加载，尽管开发者把它列在最后加载。


Figure 6. @import causes resources to be downloaded out-of-order in IE
图6. 在IE内@import造成下载顺序的混乱


LINK LINK

It’s simpler and safer to use LINK to pull in stylesheets:
使用<link>更简单且安全地导入样式表：

复制内容到剪贴板

代码:

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

Using LINK ensures that stylesheets will be downloaded in parallel across all browsers. The LINK LINKexampledemonstrates this, as shown in Figure 7. Using LINK also guaranteesresources are downloaded in the order specified by the developer.
使用<link>可以保证在所有浏览器内的并行下载。”LINK LINK“的示例表明了这一点，如图7所示。使用<link>还可以保证下载按照开发者指定的顺序进行。


Figure 7. using link ensures parallel downloads across all browsers
图7. 使用<link>在所有浏览器内都能保证并行下载

These issues need to be addressed in IE. It’s especially badthatresources can end up getting downloaded in a different order. Allbrowsers should implement a small look ahead when downloadingstylesheets to extract any @import rules and start those downloadsimmediately. Until browsers make these changes, I recommendavoiding@import and instead using LINK for inserting stylesheets.
在IE内还有些问题需要解决。它还是不能很好地按指定顺序下载。所有的浏览器应该小小地改进，从下载的样式表中提取@import规则并且开始立刻开始下载。直到浏览器进行这些改进自之前，我建议使用<link>替代@import来引入样式表。


Update: April 10, 2009 1:07 PM

Based on questions from the comments, I added two more tests: LINK with @imports and Many LINKs. Each of these insert four stylesheets into the HTML document. LINK with @imports uses LINK to load proxy.css; proxy.css then uses @import to load the four stylesheets. Many LINKshasfour LINK tags in the HTML document to pull in the four stylesheets(myrecommended approach). The HTTP waterfall charts are shown inFigure 8and Figure 9.
基于评论中的问题，我又增加了2个测试：LINK with @imports 和Many LINKs. 每个插入4个样式表到HTML文件内。LINK with @imports 使用<link>链接 proxy.css，proxy.css使用@import规则导入4个样式表文件。 Many LINKs 使用4个<link>标签在HTML文档内链接4个样式文件（即我建议的方法）。HTTP瀑布图如图8和图9所示。


Figure 8. LINK with @imports



Figure 9. Many LINKs


Looking at LINK with @imports,thefirst problem is that the four stylesheets don’t start downloadinguntil after proxy.css returns. This happens in all browsers. On theother hand, Many LINKs starts downloading the stylesheets immediately.
LINK with @imports示例，第一个问题是4个样式表文件不会在proxy.css结束之前开始下载。所有的浏览器内都是这样的情况。另一方面， Many LINKs 则立即开始下载这些样式表文件。

The second problem is that IE changes the download order. I added a 10second script (the really long bar) at the very bottom of the page.Inall other browsers, the @import stylesheets (from proxy.css) getdownloaded first, and the script is last, exactly the order specified.
第2个问题是，IE会改变下载顺序。我增加了一个10秒的脚本（那个最长的进度条）在页面最最下面。在其他的浏览器内（非IE），都会按照顺序先下载@import的样式表文件（proxy.css中的），而脚本后下载。

In IE, however, the script gets inserted before the @import stylesheets, as shown by LINK with @imports in Figure 8.
在IE内，脚本总是先于@import的样式表文件下载，如 LINK with @imports 图8所示。

This causes the stylesheets to take longer to download since the longscript is using up one of only two connections available in IE 6&7.
在IE 6 ＆ 7内，这将导致样式需要更长的时间才能下载，因为长脚本占用了2个有效的连接之一 。

Since IE won’t render anything in the page until all stylesheets aredownloaded, using @import in this way causes the pageto be blank for 12seconds.
由于IE不会在样式表下载完成之前呈递任何的页面，因此使用@import会造成12秒的空白页面。

Using LINK instead of @import preserves the load order, as shown by Many LINKs in Figure 9. Thus, the page renders in 4 seconds.
使用<link>而不是@import保持其加载顺序，如图9中 Many LINKs 所示。则网页可在4秒内呈现。

The load times of these resources are exaggerated to make it easy toseewhat’s happening. But for people with slow connections, especiallythosein some of the world’s emerging markets, these response times may notbe that far from reality.
资源的下载时间被加大是为了方便观察。但对于那些连接速度慢的人，特别是世界上的新兴市场，这种响应时间可能并非脱离现实。

The takeaways are:

• Using @import within a stylesheet adds one more roundtrip to the overall download time of the page.
• Using@import in IE causes the download order to be altered. This may causestylesheets to take longer to download, which 才 rendering making thepage feel slower.

总结：

• 使用在样式表文件内使用@import 增加一个来回从而延长了页面的下载时间。
• 使用@import会改变IE的下载顺序。这可能会导致样式表文件需要更长的时间才能下载，从而阻碍页面的渲染，使用户感觉很慢。