@import 会阻塞关键渲染路径，导致链式加载延迟，而 可让浏览器提前发现资源并并行下载，提升页面加载速度与首次渲染性能。
使用 @import 在 CSS 中加载样式表会导致页面渲染变慢，因为它会阻塞关键路径，延迟样式的下载与应用。浏览器必须先下载主 CSS 文件，再从中解析并请求被导入的资源，形成链式加载，增加整体等待时间。
相比之下，使用 标签在 HTML 中直接引入 CSS 文件，可以让浏览器更早地发现资源，实现并行下载，显著提升页面加载速度。
为什么 @import 会影响性能？
• @import 是在 CSS 文件内部调用的，浏览器只有解析到这行代码时才会发起请求，造成延迟。• 它无法与页面其他资源并行加载，形成“阻塞-下载-再阻塞”的模式。
• 多层 @import（如 A.css 导入 B.css，B.css 再导入 C.css）会引发瀑布式请求，严重拖慢渲染。
用 替代 @import 的优势
• 浏览器在解析 HTML 时就能立即发现 资源，提前开始下载。• 所有通过 引入的 CSS 可以并行加载，减少总耗时。
• 更利于浏览器构建渲染树，缩短首次渲染时间（FCP）。
如何正确替换 @import
将原本写在 CSS 文件中的：
@import url('styles/layout.css');
@import url('components/button.css');
改为在 HTML 文件的
中使用：
立即学习“前端免费学习笔记（深入）”；
如果需要按条件加载（如不同屏幕尺寸），可以结合 media 属性：
进阶优化建议
• 将关键 CSS 内联到 HTML 中，避免额外请求。• 对非关键 CSS 使用 rel="preload" 预加载，再通过 JavaScript 动态加载。
• 合并多个小文件，减少 HTTP 请求数量（尤其在 HTTP/1.1 环境下）。
• 使用 HTTP/2 或 HTTP/3 支持多路复用，进一步提升并发效率。
基本上就这些。把 @import 换成 是个简单但效果明显的优化手段，能有效提升页面响应速度和用户体验。不复杂但容易忽略。
