link与@import引入外部样式表的区别

来源：互联网发布：linux挂载iso镜像 yum 编辑：程序博客网时间：2024/06/05 08:38

使用上的区别

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却不可以。

0 0