应优先用 而非 @import 加载 css，因其并行加载、尽早解析，避免 fouc 和布局抖动；关键样式内联，非关键样式异步加载；合理使用 media 属性条件加载，并配合 font-display: swap 与字体预加载优化移动端体验。
用 <link> 加载 CSS，别用 @import
在移动端 HTML 中，@import 会阻塞并延迟 CSS 解析，导致关键样式晚于 DOM 渲染，触发 FOUC（Flash of Unstyled Content）或布局抖动。尤其在弱网下，用户可能先看到无样式的白屏或错位内容。
-
<link rel="stylesheet" href="main.css">是并行加载、尽早解析的最优方式 -
@import只应在 CSS 文件内部条件引入（如媒体查询嵌套），不在 HTML 或 JS 中调用 - Webpack/Vite 等构建工具默认不生成
@import，但若手动写了index.html中的<style>@import url(...);</style>，需立刻替换为<link>
优先使用 media 属性做条件加载
移动端设备差异大，不是所有 CSS 都需要在所有机型上下载。用 media 属性可让浏览器跳过不匹配设备的样式表下载，节省首屏资源。
-
<link rel="stylesheet" href="print.css" media="print">—— 打印样式不参与页面渲染 -
<link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">—— 平板及以上才加载 - 慎用
media="(max-width: 480px)"：部分安卓浏览器对动态媒体查询支持不稳定，建议只用于非关键样式（如 icon 字体降级） - 不要把响应式断点全靠
media拆文件，主样式仍应合并为 1–2 个核心 CSS，避免过多 HTTP 请求
关键样式内联，非关键样式异步加载
首屏可见区域的样式必须立即可用。把影响首屏渲染的 CSS（如 header、hero、按钮基础样式）提取为内联 <style></style>，其余交由 rel="preload" 或 JS 动态注入。
- 构建时用工具（如
critical、rollup-plugin-critical-css）提取首屏关键 CSS，写入 HTML的<style></style>标签 - 非关键 CSS 用
<link rel="preload" as="style" href="async.css" onload="this.onload=null;this.rel='stylesheet'">实现无阻塞加载 - 避免用 JS 的
document.write或appendChild插入<link>：会阻塞解析，且 iOS Safari 对动态插入的媒体查询支持有延迟
字体和图标资源的 CSS 引入要配合 font-display 和预加载
移动端字体加载慢会导致文字长时间不可读（FOIT/FOUT），图标字体（如 Font Awesome）若未提前声明，可能引发重排或图标闪烁。
立即学习“前端免费学习笔记（深入）”；
- 在
@font-face规则中强制设置font-display: swap，确保文本立即显示，字体异步替换 - 用
<link rel="preload" as="font" type="font/woff2" crossorigin href="icon.woff2">提前拉取图标字体，避免 CSS 解析后才发起请求 - 避免在 CSS 中用
url()直接引用未预声明的远程字体——CDN 延迟 + CORS 配置缺失会导致字体加载失败且无降级提示
/* 示例：安全的图标字体声明 */
@font-face {
font-family: 'Icons';
src: url('icons.woff2') format('woff2');
font-display: swap;
font-weight: normal;
font-style: normal;
}移动端 CSS 引入真正难的不是“怎么加”，而是判断“哪些该立刻加、哪些可以晚点加、哪些根本不用加”。很多项目把整站 CSS 打包成一个 300KB 的 app.css，再用 <link> 引入——技术上没错，但体验上等于主动放弃首屏性能控制。
