根本原因是WebView容器对资源加载、解析和渲染的容忍度远低于桌面Chrome，尤其在低端安卓机或iOS WKWebView旧版本中，未设宽高的<img loading="lazy">易引发CLS，@import嵌套使FCP延迟超300ms；内联CSS须≤14KB，否则阻塞渲染线程，应使用PurgeCSS等工具提取首屏关键样式，禁用@import。
为什么混合式 App 的 HTML 加载特别慢
不是 HTML 文件本身大，而是 WebView 容器对资源加载、解析和渲染的容忍度远低于桌面 Chrome。尤其在低端安卓机或 iOS WKWebView 旧版本里，一个没设 width/height 的 <img loading="lazy"> 就可能触发严重布局偏移（CLS），而 @import 在 CSS 里多嵌一层，FCP 延迟直接跳 300ms+。
常见错误现象包括：首屏白屏超 2s、滚动卡顿、字体闪动、第三方 SDK 加载阻塞整个页面初始化。
- WebView 默认不启用 Gzip（需服务端显式配置）
- 本地
file://协议下，preload、prefetch和 CORS 请求多数失效 - 部分安卓 WebView 忽略
loading="lazy"，但又不报错，导致图片全量加载 - 内联
<style>超过 14KB，会阻塞渲染线程，比外链还慢
关键 CSS 内联必须控制在 14KB 以内
内联 CSS 是为了绕过网络请求，但 WebView 解析大块内联样式比下载压缩后的外部文件更耗时。超过阈值后，主线程被长时间占用，用户看到的是空白或闪烁内容。
- 用
PurgeCSS或Tailwind’s content配置提取真正用于首屏的规则，别直接把整个框架 CSS 塞进去 - 避免在内联样式中使用
@import—— 它会立刻变成同步阻塞，且无法被工具识别剔除 - 检查生成结果：
document.querySelector('style').textContent.length应 - 若业务逻辑复杂，宁可拆成两段：核心骨架样式（<link rel="stylesheet" media="print" onload="this.media='all'"> 异步补全
loading="lazy" 在混合容器里的生效边界
它只对 <img> 和 <iframe> 生效，且依赖 WebView 的 Intersection Observer 实现。iOS 15.4 以下、安卓 7–9 的系统 WebView 大概率忽略该属性，但不会报错 —— 表现就是“好像加了，其实没起作用”。
立即学习“前端免费学习笔记（深入）”；
- 首屏图片必须写
loading="eager"，否则某些 WebView 会先触发 lazy 加载逻辑，再 fallback 到 src，造成重复请求 - 所有
<img>必须显式声明width和height，否则懒加载完成瞬间引发 layout shift，Core Web Vitals 直接扣分 - 背景图（
background-image）不支持该属性，得改用<img>+object-fit，或降级到 JS 方案（getBoundingClientRect()+src动态赋值） - 测试时不要只看 Chrome DevTools，真机连上远程调试（
chrome://inspectfor Android / Safari Web Inspector for iOS）才能确认是否真实生效
WebView 中禁用 @import 和误用 preload
@import 在任何 CSS 文件里都是反模式，在混合环境中更是雪上加霜：它强制串行加载，且无法被预加载识别；preload 若加错资源类型或漏写必要属性，则要么无效，要么抢占带宽，拖慢真正关键资源。
-
@import必须全部替换为<link rel="stylesheet">，哪怕只是引入 reset.css —— 这是构建阶段就能自动做的事（PostCSS 插件如postcss-import可展开，但生产环境建议关掉，直接输出扁平 CSS） -
<link rel="preload">只用于当前页确定马上要用的资源：比如主字体（as="font"+crossorigin）、首屏 CSS（as="style"）、核心 JS（as="script"） - 绝对不要
preload图片 —— 浏览器无法判断展示时机，容易挤占关键资源带宽 - 在
file://环境下，preload多数失效，此时应改用 JS 动态创建<link>并设置rel="stylesheet"，更可控
混合式开发里，HTML 不是静态文档，而是运行时环境的输入接口。它的质量直接决定 WebView 启动第一帧的耗时，而这个时间点没有重试、没有缓存兜底 —— 用户划走就结束了。
