CSS中link与import的区别

一、import的用法

1，在html文件中

<style type="text/css">

@import url(http://www.dreamdu.com/style.css);

</style>

2，在css文件中

@import url("CSS文件");

对@import url（）做一下总结：

1，@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。

2，@import 是css2里面的，所以古老的ie5不支持。

3，当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

4，link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css

二、import的加载过程分析与对比

link嵌套@import

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

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
嵌入样式表。

多个@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中引发资源文件的下载顺序被打乱

三、import和link的区别

两者都是外部引用CSS的方式，但是存在一定的区别：

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

四：@import最优写法

@import的写法一般有下列几种：

@import 'style.css' //Windows IE4/ NS4, Mac
OS X IE5, Macintosh IE4/IE5/NS4不识别

@import "style.css" //Windows
IE4/ NS4, Macintosh IE4/NS4不识别

@import url(style.css) //Windows NS4,
Macintosh NS4不识别

@import url('style.css') //Windows NS4, Mac
OS X IE5, Macintosh IE4/IE5/NS4不识别

@import url("style.css")
//Windows NS4, Macintosh NS4不识别

由上分析知道，@import url(style.css) 和@import
url("style.css")是最优的选择，兼容的浏览器最多。

从字节优化的角度来看@import url(style.css)最值得推荐。