Q36
★ ★ ★ ★ ★
<link> 和 @import 区别?
⚡ 速记答案(30 秒)
<link> 是 HTML 标签,可并行加载,优先级高。@import 在 CSS 内再引入 CSS,会串行加载,性能更差,旧浏览器支持也一般。建议:生产环境尽量用 <link>。
📖 详细讲解
标准面试回答(推荐记住)
link 和 @import 都能引入 CSS,但有几个区别。link 是 HTML 标签,可以引入 CSS、icon 等,加载是并行的,优先级更高。@import 是 CSS 语法,只能引入 CSS,而且是串行加载,必须等前一个加载完才能加载下一个,性能更差。另外 link 可以用 JS 动态控制,@import 不行。一些老浏览器对 @import 支持也不好。所以生产环境推荐用 link。
✅ 面试要点
- •link 并行加载,@import 串行
- •link 优先级更高
- •生产环境用 link