html嵌套过深直接拖慢webview首屏渲染，dom深度超6层导致fcp延迟200ms+，需用语义化标签替代冗余div、控制fetchpriority与decoding、联动缓存策略优化。
HTML嵌套过深直接拖慢WebView首屏渲染
Hybrid App里白屏时间长，八成不是JS卡住，而是WebView在解析你写的那堆嵌套
时就卡住了。移动端WebView（尤其旧版Android System WebView）对DOM深度极其敏感：超过6层嵌套，FCP平均延迟200ms+，低端机上甚至触发强制重排。
-
Show DOM properties在Chrome DevTools Elements面板右键任意节点可查depth值，≥7必须重构 - 能用
<section></section>、<article></article>、<header></header>替代三层堆叠的，优先替换——它们不增加解析开销，还能减少DOM节点总数<td>里禁止再套<code><div>：表格单元格内样式计算成本高，混用flex时极易触发重排 <h3>语义化标签不是为了好看，是让Native和JS能稳定绑定</h3> <p>写<code><nav></nav>和写<div class="nav">对渲染耗时几乎没差别，但它能让Native层通过<code>document.querySelector('nav')精准定位，避免因类名变更或CSS-in-JS导致的绑定失效；也能让JS桥接代码按语义区域批量注入逻辑，而不是靠脆弱的class匹配。-
<footer></footer>必须包裹在最近的<section></section>或<article></article>内，单独丢在body底部，部分安卓WebView会忽略其语义，导致JS无法正确识别内容边界 -
<time datetime="2026-06-03"></time>这类标签，iOS Safari会自动识别并提供「添加到日历」快捷操作，Native层也能直接提取结构化时间字段 - 全页只用一个
<header></header>却塞进logo+搜索+登录，屏幕阅读器会读作单一大块“banner”，失去层次——应拆分为<header></header>（页面级）+<header></header>（section级）
离线包里的HTML必须带fetchpriority和decoding控制加载节奏
离线包资源虽已存在本地，但WebView仍按默认策略加载：所有
<img>标记为fetchpriority="low"，哪怕它是LCP图；解码默认同步，一张200KB的图就能卡住主线程。这两个属性不是可选项，是离线场景下滚动不卡顿的前提。- 首屏关键图必须加
fetchpriority="high"+loading="eager"（别用lazy） - 大于100KB的图片建议加
decoding="async"；SVG或小图标不用加 - 离线包构建脚本需自动注入这些属性，不能依赖人工补写——否则增量更新后容易遗漏
缓存策略与HTML结构要联动设计
离线包不是把HTML文件扔进assets目录就完事。HTML本身得配合缓存机制：外联CSS/JS路径必须带版本哈希（如
app.3a8f2d.css），否则Service Worker缓存更新后，HTML仍引用旧路径，导致白屏或样式错乱。- 所有静态资源引用必须用相对路径或CDN绝对路径，禁用协议相对路径（
//cdn.com/a.js），某些旧版WebView不支持 -
Cache-Control: max-age=31536000配时间戳更新，但HTML文件本身缓存时间要设短（如max-age=300），确保能及时拉取新离线包清单 - Service Worker中
cache.addAll()列表必须与HTML实际引用的资源严格一致，漏一项就会在离线时404
<div>的去留之间，不在打包工具配置里。</div>
