link与@import的区别和分别对应的例子

<link> 和 @import 是用于在网页中引入外部资源（如样式表）的两种不同的方法。它们之间有以下几个区别：

下面是 <link> 和 @import 的区别以及相应的代码例子：

1. 加载顺序和兼容性：

• 使用 <link> 标签加载外部样式表：

<link rel="stylesheet" href="styles.css">

• 使用 @import 加载外部样式表：

@import url("styles.css");

注意：@import 只能在 CSS 文件中使用。

2. 权重和覆盖规则：

• 使用 <link> 标签引入样式表：

<link rel="stylesheet" href="styles.css">

• 使用 @import 引入样式表：

@import url("styles.css");

3. 异步加载：

• 使用 <link> 标签异步加载样式表：

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

通过将 rel 属性设置为 "preload"，样式表可以以异步方式加载，以提高页面加载性能。<noscript> 标签内的 <link> 标签是为了在不支持 JavaScript 的情况下提供回退。

• @import 没有内置的异步加载机制，需要通过其他方式实现异步加载。

综上所述，<link> 标签是更常见、更灵活且性能更好的方法，而 @import 仍然可以在某些特定情况下使用。