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

在前端开发中，link 和 @import 都可以用来导入样式表，但它们之间有一些关键的区别：

1. 加载方式和性能:

• link: link 标签是 HTML 元素，浏览器会并行下载 HTML 文件和 CSS 文件，这意味着 CSS 文件的下载不会阻塞 HTML 文件的解析和渲染，从而提高页面加载速度。
• @import: @import 是 CSS 语法，浏览器必须先下载和解析 HTML 文件，然后遇到 @import 规则时才会下载相应的 CSS 文件。这会导致 CSS 文件的下载被阻塞，页面渲染速度变慢，尤其是在导入多个 CSS 文件时，会产生明显的延迟。

2. 优先级和层叠:

• link: link 标签引入的样式优先级高于 @import 引入的样式。如果两个样式表都定义了相同的样式规则，link 标签引入的样式会覆盖 @import 引入的样式。
• @import: @import 规则的优先级较低，容易被其他样式覆盖。此外，@import 规则必须放在样式表的开头，不能在其他样式规则之后使用。

3. 兼容性:

• link: link 标签拥有更好的浏览器兼容性，几乎所有浏览器都支持。
• @import: @import 在较老的浏览器（例如 IE5）中可能存在兼容性问题。虽然现在这些浏览器已经很少使用，但在开发兼容性要求较高的项目时仍需注意。

4. JavaScript 操作:

• link: link 标签是 HTML 元素，可以通过 JavaScript 动态地添加、删除和修改，从而实现动态样式切换等功能。
• @import: @import 是 CSS 语法，无法通过 JavaScript 直接操作。

5. 其他:

• link 标签可以指定 media 属性，根据不同的媒体类型（例如屏幕、打印机）加载不同的样式表，实现响应式设计。@import 也支持 media 查询，但支持不如 link 完善。

总结:

在大多数情况下，推荐使用 link 标签导入样式表，因为它具有更好的性能、兼容性和可操作性。@import 有一些局限性，通常不推荐使用，除非你需要在旧版浏览器中实现一些特殊的效果，或者需要在一个 CSS 文件中导入另一个 CSS 文件。

示例:

使用 link 导入样式表:

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

使用 @import 导入样式表:

@import url("style.css");