rel="preload"在Hybrid中常失效，因file://协议下WebView普遍忽略该提示且as="style"语义不被识别；应改用fetch+CSSStyleSheet注入或原生预置CSS文件。
移动端 Hybrid 中预加载 CSS 不能靠 rel="preload" 一招鲜——它在 file:// 协议下基本失效，且多数安卓 WebView 忽略 as="style" 的语义。
为什么 rel="preload" 在 Hybrid 里经常不 work
WebView 加载本地 HTML（file:///android_asset/ 或 file:///data/...）时，preload、prefetch 等资源提示大多被静默忽略；iOS WKWebView 15.4 以下、安卓 7–9 的系统 WebView 尤其明显。更麻烦的是：rel="preload" as="style" 触发的资源不会自动变成样式表，必须手动 onload 切换 rel，而这个回调在 file 协议中可能永不触发。
- 现象：Chrome DevTools Network 面板里看不到预加载请求，
document.styleSheets.length也不变 - 根本原因：WebView 内核对非 HTTP(S) 协议下的资源提示支持极弱，不是 bug，是规范未覆盖
- 替代思路：把“预加载”从网络层移到 JS 控制层，用
fetch()+CSSStyleSheet注入
用 fetch() + CSSStyleSheet 手动注入非关键 CSS
适用于 Android 和 iOS 较新 WebView（Chrome 80+/WKWebView 16+），绕过协议限制，精准控制加载时机和顺序：
- 先用
fetch('non-critical.css')获取文本内容，避免阻塞解析 - 创建
new CSSStyleSheet()实例，调用replaceSync(cssText)注入 - 再通过
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet]激活 - 注意：若需兼容旧版（如 Android 6–8），改用动态
并插入head末尾，但要确保不在首屏渲染前触发
示例关键逻辑：
const sheet = new CSSStyleSheet();
fetch('non-critical.css')
.then(r => r.text())
.then(css => sheet.replaceSync(css))
.then(() => {
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
});
首屏关键 CSS 必须内联，但别超 14KB
WebView 解析大块内联 比加载压缩后的外链 CSS 更慢——超过 14KB 会显著阻塞主线程，导致白屏延长。这不是建议值，是实测阈值：
- 用
critters（Vite/Webpack 插件）或PurgeCSS提取真实用于首屏 DOM 的规则，别留@import、@font-face、url() - 检查产出：
document.querySelector('style').textContent.length应 ≤ 14336 - tailwind 用户重点配
content字段，只扫首屏模板路径（如src/pages/home.vue），禁用无用断点插件 - 若首屏结构复杂，宁可拆成两段：核心骨架样式（内联）+ 次要修饰样式（用上一节的
fetch注入）
Android 本地缓存 CSS 文件比网络预加载更可靠
对于长期不变的 CSS（如框架样式、主题色定义），直接写死在 APK / IPA 里，用原生能力预置到沙盒，比任何 Web 层预加载都稳：
- Android：把
main.css放进assets/css/，WebView 初始化后用loadUrl("file:///android_asset/css/main.css")同步加载（注意 MIME 类型需为text/css） - iOS：Bundle 内资源可通过
WKWebView的customProtocol或本地file://路径读取，但需确保Content-Type正确 - 优势：零网络延迟、不依赖协议支持、可配合原生缓存策略（如 MD5 校验更新）
- 风险：版本更新需重发 App，不适合高频迭代的业务 CSS
真正难的不是“怎么塞进页面”，而是每次发版后验证那 14KB 内联 CSS 是否仍 100% 覆盖首屏结构——尤其当产品临时加了个 class="hidden lg:block"，就可能让整套预加载逻辑失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
