CSS @import 引入组件样式出现延迟，主要是因为 @import 会阻塞页面渲染，导致加载变慢。解决方法包括： 1. **避免使用 @import**：直接使用 `` 标签引入 CSS 文件，性能更优。 2. **将 @import 放在底部**：尽量将 @import 放在 CSS 文件的末尾，减少对关键渲染路径的影响。 3. **使用异步加载**：通过 JavaScript 动态加载

CSS 中的 `@import` 规则虽看似便捷，实则因强制同步加载、深度阻塞后续样式解析与渲染（甚至引发 FOUC 和跨域预检延迟），成为组件样式加载缓慢的“隐形瓶颈”；它并非网络问题，而是规范层面的设计缺陷——现代开发应果断弃用，转而采用 `` 并行加载、构建工具模块化引入（如 `import './Button.css'`）或 CSS 文件合并等更高效、更可控的方式，从根源上提升页面渲染性能与用户体验。

使用 @import 引入组件样式时出现延迟，根本原因是它会阻塞后续 CSS 的解析与渲染，尤其在链式导入或跨域场景下更明显。这不是 bug，而是 CSS 规范定义的同步加载行为——浏览器必须等 @import 的资源下载、解析完成，才会继续处理后面的样式规则。

避免在主样式表中用 @import 引入组件样式

这是最直接有效的解决方式。现代项目应优先使用构建工具（如 Webpack、Vite）的模块化能力，把组件样式作为独立 CSS 或 SCSS 模块 在 JS 中 import，或通过 标签并行加载。

• ❌ 不要在 main.css 里写 @import './button.css';
• ✅ 改为在组件 JS 中写 import './Button.css';（配合 css-loader 或 Vite 自动处理）
• ✅ 或在 HTML 中单独加 ，浏览器可并行下载

@import 的阻塞层级比你想象中更深

它不仅阻塞同文件后续样式，还会阻塞 同一层 import 链中的所有后续资源，包括字体、图片甚至其他 @import 的嵌套引入：

• 若 A.css 中 @import 'B.css';，而 B.css 又 @import 'C.css';，则 C 必须等 B 下载完才开始请求
• 如果 B.css 文件本身较大或服务器响应慢，整个样式链都会卡住，页面可能出现 FOUC（无样式内容闪烁）
• 跨域 @import 还会触发额外的 CORS 预检，进一步拉长延迟

真要用 @import？至少控制它的位置和范围

如果受限于旧架构不得不保留 @import，请严格限制其使用场景：

• 只在 CSS 文件末尾引入非关键样式（如打印样式 @import 'print.css' print;）
• 避免在