使用上的区别
link:
某html文件的head中有:
<link rel="stylesheet" type="text/css" href="sheet.css">
link是一个比较老的html的标签在任何浏览器下都可以很好的工作,link的作用是将外部文件引入到当前文件中,可以引入除去css文件之外别的类型的文件。但是只能位于head中。
rel = “stylesheet”表示的是当前文档与引用的文档之间的关系。
type=“text/css”表示引用的文档是文本类型的css文件。
href=“URL”指明引用文件的URL。
注意:上述这三个缺一不可,比如如果缺少rel页面link到多个css文件的话,可能会忽略该文件。
@import:
某css文件如下:
@import url(sheet.css);
.content{
/*
………………
*/
}
@import是css的一个属性,代表着引入css文件到当下css文件中,且只能引入css文件。@import只能位于文件的顶部,这降低了灵活性。
性能上的区别
(一下内容可能涉及webkit内核浏览器相关的知识,可以关注本人写的关于webkit系列的文章)
两个css文件都是使用link的方式引入:
Demo.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
<div class="content">
</div>
</body>
</html>
sheet.css文件:
.content{
border: 1px solid;
}
style2.css文件:
.content{
background-color: red;
width: 100px;
height: 100px;
}
在解析Dom。html文件的时候,遇到link标签,那么就会通知资源加载器加载style.css资源,但是注意并不会阻塞html文件的解析,接下来又会遇到要加载style2.css文件,所以又通知资源加载器加载style2.css资源,此时html文件继续解析知道生成DOM树触发DOMcontent事件。同时会发现,这两个css文件的请求是在解析html的时候一并发出的,也就是说这两个css文件是并行加载的,这无疑是节约了时间。一般情况下,要在html解析完成并且生成DOM树之后,才会进行css解析工作,所以只要在这一过程中得到css文件即可。
Demo.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="content">
</div>
</body>
</html>
style.css文件:
@import url(style2.css);
.content{
border: 1px solid;
}
style2.css:
.content{
background-color: red;
width: 100px;
height: 100px;
}
从这里可以看出DOM构建完成的时间(DOMcontent事件触发)和用link的方式差不多,但是在资源加载上差别还是不小的。那么为什么会这样呢?
在前面介绍过通过link方式引入多个css样式表,他们之间是并行加载的,所以之间不会有影响。但是在@import中且不是这样的,在解析DOM。html时候遇到link,会通知资源加载器加载style.css文件,然后继续解析HTML直到完成。值得注意的是,在加载style.css文件的时候是很消耗时间的比如要建立链接,解析DNS等等工作。直到style.css加载完之后,对css文件开始解析的时候发现有@import url(style2.css);开始加载style2.css。然后在给资源加载器发送请求加载这个文件。所以可以看出这两个文件的加载时串行的,所以是消耗时间的性能不好。
其他区别
link因为是html元素,可以通过js DOM动态的添加样式,但是@import却不可以。