@import 会拖慢页面渲染，因其同步阻塞、串行加载、无法预加载，导致FOUC或白屏；应替换为 标签实现并行下载、条件加载和预加载。
直接用 @import 在 CSS 中引入外部样式表，确实会拖慢页面渲染——它默认是同步阻塞、顺序加载的，浏览器必须等它下载并解析完，才能继续处理后续 CSS 和 HTML 渲染。这不是“延迟加载”，而是“强制等待”，容易造成 FOUC（内容闪现）或白屏延长。
为什么 @import 会让页面变慢
@import 的本质是在 CSS 解析阶段发起 HTTP 请求，且有两大硬伤：
- 不支持并行下载：多个
@import会串行加载（A 等 B，B 等 C），哪怕它们本可同时请求 - 阻塞渲染流：即使写在 CSS 文件末尾，浏览器仍需暂停样式计算，直到所有
@import资源就绪 - 无法被预加载器识别：
<link rel="preload">对@import无效，浏览器无法提前抓取
替换成 <link> 标签（最有效）
把 CSS 引入从 CSS 文件里挪到 HTML 的 中，用原生 <link>：
<!-- 原来这样写（不好） --> <style> @import url("base.css"); @import url("theme.css"); </style> <p><!-- 改成这样（推荐） --> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="theme.css">
<link> 可并行下载、支持 media 条件加载、能被预加载器捕获，还能配合 rel="preload" 提前拉取关键 CSS。
立即学习“前端免费学习笔记（深入）”；
需要条件加载？用 media 属性代替 @import
比如只想在打印时加载某份样式，别写：
@import url("print.css") print;
改用：
<link rel="stylesheet" href="print.css" media="print">
这样浏览器不会在页面加载时下载它，真正按需触发，更轻量。
真要动态/懒加载 CSS？用 JS 控制 link
对于非首屏、交互后才需要的样式（如模态框主题、图表库样式），可以 JS 动态插入：
function loadCSS(href) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; document.head.appendChild(link); } // 需要时调用 loadCSS('chart-theme.css');
注意：避免在 DOMContentLoaded 前大量动态插入，否则可能触发重排；优先用 rel="preload" + onload 切换更稳妥。
基本上就这些。@import 不是“延迟加载”，是“隐式阻塞”。现代项目中，除非兼容极老环境（IE5.5+），否则应全面替换为 <link> —— 不复杂但容易忽略。