<link> 和 @import 加载 CSS 的差异分析

主要差异

1. 加载顺序

• <link>：

  • 并行加载，不会阻塞页面渲染
  • 浏览器会同时下载多个 <link> 引入的 CSS 文件
  • 按照 DOM 顺序应用样式

• @import：

  • 串行加载，会阻塞后续资源下载
  • 必须等到前面的 CSS 下载并解析完成后才会加载 @import 的 CSS
  • 可能导致 FOUC (Flash of Unstyled Content) 问题

2. JavaScript 控制灵活性

• <link>：

  • 可以通过 JavaScript 动态创建、修改或删除
  • 可以监听 onload 和 onerror 事件
  • 示例：

  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'style.css';
  document.head.appendChild(link);
  

• @import：

  • 无法通过 JavaScript 直接控制
  • 只能在 CSS 文件中使用，无法动态修改
  • 缺乏加载状态的事件监听

其他重要差异

3. 浏览器兼容性

• <link> 在所有浏览器中都得到完美支持
• @import 在 IE5+ 中支持，但存在一些历史兼容性问题

4. 性能影响

• <link> 通常性能更好，因为支持并行加载
• @import 可能导致渲染阻塞，特别是在嵌套使用时

5. 可维护性

• <link> 在 HTML 中集中管理，更易于维护
• @import 分散在 CSS 文件中，可能难以追踪

最佳实践建议

1. 优先使用 <link>：

   • 更好的性能
   • 更灵活的 JavaScript 控制
   • 更清晰的代码结构

2. 谨慎使用 @import：

   • 仅在需要模块化 CSS 且了解其性能影响时使用
   • 避免在关键路径 CSS 中使用

3. 现代替代方案：

   • 考虑使用 CSS 预处理器（如 Sass/Less）的 @import（编译后会合并为 <link>）
   • 使用现代打包工具（如 Webpack）处理 CSS 依赖

结论

从加载顺序和 JavaScript 控制灵活性来看，<link> 是更优的选择。它提供了更好的性能、更灵活的编程接口和更可靠的加载行为。@import 应保留给特定的 CSS 模块化需求使用，并充分了解其性能影响。