CSS如何高效引入样式表_对比link标签与import指令的性能差异

link 标签加载 CSS 并行高效，@import 串行阻塞渲染；前者支持 preload、media 懒加载和 JS 动态控制，后者无此能力且易隐式拖慢首屏，现代项目应避免使用。link 标签加载 CSS 是并行的，@import 是串行阻塞的浏览器解析 HTML 时，遇到 <link rel="stylesheet"> 会立即发起网络请求，并且多个 <link> 之间默认并行下载；而 @import 写在 CSS 文件里（或 <style> 块中），会等到父样式表下载、解析完才开始加载被 import 的资源，形成隐式串行链。这意味着一个 @import url("a.css") 后面再 @import url("b.css")，b 必须等 a 完全就绪才能启动请求。常见错误现象：PageSpeed Insights 报告 "Render-blocking resources"，但你检查 HTML 只有 1 个 <link>，实际是它引入的 CSS 里嵌了多层 @import，把关键样式拖慢了 2--3 秒。使用场景：仅在需要条件化加载（如 IE 专用 hack）或维护遗留 CSS 拆分逻辑时才考虑 @import，现代项目应避免性能影响：实测 3 层 @import 在弱网下可比等效 <link> 多出 800ms+ 首屏阻塞时间兼容性无差别：所有浏览器都支持两者，但 @import 在 CSS 文件内不支持媒体查询动态匹配（<link media="print"> 可提前排除）link 标签支持 preload 和 media 属性，@import 不支持<link> 可以配合 rel="preload" 提前拉取关键 CSS，也能用 media 属性做媒体查询懒加载（比如 media="print" 的样式不会阻塞屏幕渲染）；@import 完全没这些能力，写进去就强制加载。典型误用：@import url("mobile.css") screen and (max-width: 768px) ------ 这句语法无效，@import 后的媒体查询只在 CSS 解析阶段生效，无法阻止初始下载。立即学习"前端免费学习笔记（深入）"； Trenz AI驱动的社交电商营销平台，专为TikTok Shop设计