@import是同步加载，阻塞渲染，而懒加载通过js动态引入css实现非关键资源延迟加载。两者机制不同，无法直接结合。应使用动态创建link标签或media属性替代@import以优化性能。
在CSS中，@import 和 懒加载 是两个不同层面的技术，通常不直接结合使用。但理解它们各自的作用和限制，可以帮助你在实际项目中更合理地组织资源加载策略。
1. @import 的工作方式
@import 是 CSS 提供的一种从一个样式表中引入另一个样式表的语法。例如：
@import url('theme.css');
@import url('layout.css');
它必须写在 CSS 文件的开头，浏览器会同步加载这些外部资源，阻塞渲染直到导入的文件下载并解析完成。这意味着：@import 本质上是同步加载，不利于性能优化。
2. 懒加载的基本概念
懒加载（Lazy Loading）指的是延迟加载非关键资源，比如图片、脚本或非首屏需要的样式，直到用户滚动到对应位置或满足某些条件时才加载。对于 CSS 资源，懒加载通常通过 JavaScript 动态创建 link 标签实现：
立即学习“前端免费学习笔记（深入）”；
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'lazy-styles.css';
document.head.appendChild(link);
这样可以避免阻塞页面初始渲染，提升首屏加载速度。
3. @import 与懒加载不能直接结合的原因
- @import 写在 CSS 文件中，由浏览器自动处理，无法控制加载时机
- 使用 @import 会增加请求链，导致关键路径更长（如：主CSS → 导入CSS → 再导入下一个）
- JavaScript 无法直接“懒加载”一个被 @import 引用的文件，因为解析权在浏览器
因此，你不能用 JavaScript 控制 @import 的懒加载行为。
4. 更优的替代方案：动态加载 + 媒体查询
如果想实现类似“懒加载 CSS”的效果，推荐以下方法：
- 动态插入 link 标签：在需要时通过 JS 加载 CSS 文件
- 使用 media 属性延迟加载：将非关键 CSS 设置为特定媒体类型，如 print，浏览器会低优先级加载
- 预加载提示（preload）：结合 提前加载但不立即应用
示例：延迟加载打印样式
<link rel="stylesheet" href="print.css" media="print">
这个资源不会阻塞屏幕渲染，仅在打印时生效，实现了一种“懒”行为。
基本上就这些。虽然 @import 看起来方便，但在现代前端开发中应尽量避免，尤其在性能敏感场景下。使用 JavaScript 动态加载或 HTML 中的 link 配合 media 控制，才是实现 CSS 懒加载的正确方式。
