link 和 @import 的区别

页面导入样式时，link 和 @import 的差异对比

问题

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

link 是 HTML 标签，用于引入外部资源；@import 是 CSS 语法，用于在样式表中导入其他样式。

<!-- link 方式 -->
<link rel="stylesheet" href="style.css">

/* @import 方式 */
@import url('style.css');

link 引入的样式会在页面加载时同步加载，而 @import 引入的样式会在页面加载完成后才加载，可能导致页面闪烁（FOUC）。

link 是标准 HTML 标签，所有浏览器都支持；@import 在 IE5 以下不支持，但现代开发中这已不是问题。

在相同条件下，link 引入的样式权重高于 @import 引入的样式。

link 标签可以通过 JavaScript 动态插入和控制；@import 无法通过 DOM 操作。

// 动态添加 link
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'style.css';
document.head.appendChild(link);