页面导入样式时，使用link和@import有什么区别？

　　在web前端中，当需要导入样式表(CSS 文件)时，可以使用标签和@import语法，它们都能实现样式的导入，但有一些区别。

　　1.link标签

　　link是 HTML 中的一个标签，用于在 HTML 文档中链接外部资源，例如 CSS 文件。使用 link 标签导入样式表的语法如下：

<link rel="stylesheet" type="text/css" href="styles.css">

　　这样，浏览器在加载页面时会同时请求styles.css并应用其中的样式。link标签支持并行加载多个样式表，因此可以在一个HTML文档中同时导入多个CSS文件。

　　(1)优点：

　　·并行加载：多个样式表可以同时加载，从而加快页面加载速度。

　　·动态样式表切换：可以使用JavaScript动态地插入或移除link标签，从而实现样式表的切换。

　　(2)缺点：

　　·页面加载时额外的HTTP请求：每个link标签都会触发一个额外的HTTP请求，可能会增加页面的加载时间。

　　·不支持嵌套：link标签无法在CSS文件中嵌套其他样式表。

　　2.@import语法： @import是CSS的一种规则，用于在一个CSS文件中导入其他CSS文件。使用@import语法导入样式表的写法如下：

@import url("styles.css");

　　这样，styles.css中的样式将被导入到当前CSS文件中。@import语法必须出现在CSS文件的顶部，且只能导入样式表，不能导入其他资源。

　　(1)优点：

　　·更好的组织样式：可以将样式拆分成多个文件，分别导入到主样式表中，有利于组织和维护样式代码。

　　(2)缺点：

　　·串行加载：由于 @import 是 CSS 规则，需要在 CSS 文件加载并解析完后才会继续加载其他资源，导致样式表的加载是串行的，可能会拖慢页面加载速度。

　　·兼容性问题：旧版本的 Internet Explorer(IE)可能对 @import 支持不完全，导致样式无法正确加载。

　　综上所述，推荐使用link标签来导入样式表，因为它更高效，支持并行加载多个样式表，并且能更好地与 JavaScript配合使用。而@import语法则较少使用，通常在特殊情况下才会考虑。