悉前端的小伙伴都知道网站的性能和网页代码有很大的关系，这里指网页代码主要是指前端代码(html、css、js代码)，而css合理使用很大关系上影响网站页面各种性能，今天主要给大家分析下css中@import和link使用和区别？

css中的@import和link

在css中@import 导入指定的的外部样式表及目标媒体，css导入外部文件主要是通过link和@import实现的，它们都各自的语法结构。如果不清楚css基础知识可翻看之前发的文章。

@import代码示例如下：

<style type="text/css">

@import url(路径地址/test.css);

</style>

link的代码示例如下：

<link href="路径地址/test.css" rel="stylesheet" type="text/css" />

css中@import和link的区别

1、属性不同

link是html提供的标签，不仅可以加载css文件，还能定义 RSS、rel 连接属性等。而

@import是css中的语法规则

2、加载顺序不同

页面打开时，link引用的css文件被加载。而@import引用的CSS等页面加载完后最后加载。

3、兼容性

@import是css2.1后提出的，而link是不存在兼容问题。

4、DOM控制性

js操作DOM，可以使用link改变样式，无法使用@import的方式使用样式。

使用@import和link的注意事项？

1、css中避免过多使用 @import

如果了解了@import原理，你就会明白它的性能并不高，过多使用它会延长浏览器渲染页面的时间。

2、@import可以在css中引入其他样式表利于修改和扩展。

代码示例如下：

index.css

———————-

@import “test1.css”;

@import “test2.css”;

test1.css

———————-

p {color:blue;}

test2.css

———————-

.mystyle {color:red}

好了关于“css中的link和@import引用”先聊到这，大家有什么更好想法欢迎评论。每天学习一个知识点，每天进步一点点。每日寄语”志不立，如无舵这舟，无衔之马，漂荡奔逸，终亦何所底乎。”下一期咱们接着聊。

、从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2、加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3、兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4、DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。