@import会让首屏渲染变慢，因为它强制浏览器串行加载css：必须等当前css文件下载并解析完，才能发起被导入文件的请求，打断并行下载，形成瀑布链；而支持html预加载器早期发现与并发请求。
为什么@import会让首屏渲染变慢
因为浏览器必须串行加载：遇到 @import 时，得先下载、解析完当前 CSS 文件，才能发起被导入文件的请求。它打断了原本可并行的资源下载，把多个 CSS 请求变成“排队等号”。比如 main.css 里写了 @import url("button.css");，那 button.css 的请求最早也要等到 main.css 完全加载并开始解析后才启动——而用 <link rel="stylesheet">，两个文件能同时发请求。
为什么构建工具无法帮你兜底
Webpack、Vite 这类工具默认不处理 CSS 原生 @import 的运行时逻辑，它们只对预处理器（如 Sass）或 PostCSS 插件（如 postcss-import）生效。如果源码里混着原生 @import，打包后很可能原样保留，直接扔进生产环境。结果就是：构建产物里还藏着 @import url("theme.css");，浏览器照常串行加载，白屏时间拉长。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 检查最终输出的 CSS 文件，搜
@import就能快速定位是否残留 - PostCSS 配置漏掉
postcss-import或启用了skipDuplicates: false，都可能导致@import未被内联 - Sass 的
@import已被官方弃用，迁移到@use才能避免变量污染和重复编译
为什么你本地测不出问题
开发阶段响应快、文件小、缓存全，@import 的延迟几乎不可见。但上线后，CDN 缓存未命中、弱网、多层代理会放大串行瓶颈。更隐蔽的是：哪怕只在 print.css 前加个 @import url("reset.css") print;，浏览器仍会在页面初始化时下载它——媒体查询不阻止网络请求，只控制样式是否生效。
- Network 面板里看到 CSS 请求呈瀑布流（一个接一个），大概率是
@import在作祟 -
<style></style>标签内写@import会被忽略（规范要求只能出现在样式表开头） - 旧版 IE 要求
@import必须在文件最顶行，前面不能有 BOM 或空行，否则整条规则失效
替换成要注意什么
不是简单删掉 @import、补上 <link> 就完事。原 @import 的顺序决定了 CSS 层叠优先级，直接平铺多个 <link> 可能导致样式覆盖错乱。
- 按原 CSS 中
@import出现顺序，依次生成<link>，保持依赖链 - 重置类（
reset.css）、基础工具类（utils.css）放最前；组件样式按实际使用层级往后排 - 非关键样式（如打印、暗色主题）务必加上
media属性，例如<link media="print" href="print.css"> - 需要动态切换主题？用 JS 创建
<link>并监听onload，别硬塞@import到内联 style 里
@import 看似只是语法替换，实则牵扯加载时机、构建配置、层叠顺序三重约束**。哪怕只留一处没清理干净，就可能让整个首屏性能回退几百毫秒。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
