link 标签加载 CSS 是并行的，多个 link 可并发下载且不阻塞 HTML 解析；而 @import 在 CSS 中为串行阻塞，必须等前一个 CSS 解析完才发起下一个请求，显著延长渲染时间。
link 标签加载 CSS 是并行的
浏览器解析 HTML 时，遇到 会立即发起 CSS 文件请求，且与 HTML 解析、其他资源（如 JS、图片）下载并行执行。这是现代浏览器默认行为，也是推荐方式。
关键点：
-
不阻塞 HTML 解析，但会阻塞后续的执行（除非加async或defer） - 多个
之间彼此不阻塞，可并发下载 - 支持
media属性做媒体查询懒加载（如media="print"时不会阻塞页面渲染）
@import 在 CSS 内部引入时是串行阻塞的
在 CSS 文件中用 @import url("a.css") 加载另一个样式表，会导致浏览器必须先下载并解析完当前 CSS，再发起 @import 指定的请求——这个过程是严格串行的，且无法被预加载器提前发现。
常见问题场景：
立即学习“前端免费学习笔记（深入）”；
- 主 CSS 文件里写
@import "theme.css"; @import "base.css";→ 两个请求依次发生，总耗时 = a.css 下载 + 解析 + theme.css 下载 + 解析 + base.css 下载 + 解析 - 即使
@import写在标签里（非外部文件），也会触发同步阻塞行为 - 不支持
media条件预判（@import print.css screen这种语法无效）
link 和 @import 的兼容性与可维护性差异
是 HTML 标准机制，所有浏览器从 IE6 起就完全支持；@import 虽也古老，但在 CSS 文件内使用时，IE6–IE8 存在解析 bug（如 @import 必须出现在文件最开头，否则被忽略）。
ecshop仿万表网商城整站
下载
该软件是以ecshop作为核心的仿制万表网的商场网站源码。万表网模板 2015最新版整体简洁大气，功能实用，是一款时尚典雅的综合类模板！样式精美的商品分类树，层次分明，分类结构一目了然。首页轮播主广告分别对应切换小广告，商品宣传更到位。独家特色增加顶级频道页面、品牌页面，以及仿京东对比功能，提升网站档次，让您的网站更加高端大气！并且全站采用div+css布局，兼容性良好，更注重页面细节，增加多种j
工程实践建议：
- 禁止在 CSS 文件中使用
@import引入其他 CSS（尤其避免链式 import） - 构建工具（如 Webpack、Vite）默认把
@import提升为或内联处理，但需确认配置未保留原始语义 - 若需条件加载（如暗色主题），优先用
，而非@import (prefers-color-scheme: dark)
实测性能差距示例（Chrome DevTools Network 面板）
以下两种写法加载相同两个 CSS 文件，在无缓存、3G 网络模拟下典型表现：
/* base.css */
@import url("theme.css");结果：
- 方式 A：两个请求时间线重叠，总阻塞时间 ≈ max(base.css, theme.css) 的下载+解析耗时
- 方式 B：theme.css 请求在 base.css 完全解析后才开始，总阻塞时间 ≈ base.css 耗时 + theme.css 耗时
- 实测差值常达 200–600ms，对 LCP（最大内容绘制）有直接影响
真正容易被忽略的是：哪怕你只在某个低频 CSS 里用了 @import，它仍会拖慢整个样式表的可用时间，进而延迟页面首次渲染。
