html-validate不能只用于离线缓存校验，因其仅检查HTML文本结构合规性，不验证Service Worker缓存逻辑、preconnect等离线无效标签、动态插入内容及缓存响应体一致性。
离线缓存下 HTML 结构校验为什么不能只靠 html-validate
html-validate 是离线静态校验的可靠工具，但它只检查 HTML 文本结构合规性，不验证缓存行为是否真实生效。你跑 npx html-validate index.html 通过了，不代表 Service Worker 能正确缓存它——因为 SW 的缓存逻辑在 JS 里，html-validate 完全不读取 sw.js 或 CacheStorage 配置。
常见误判场景：
- HTML 中写了
<link rel="preconnect" href="https://cdn.example.com">，html-validate不报错，但离线时这个标签无效，还可能拖慢加载 -
<script type="module" src="app.js">引用的 ES6 模块被html-validate当成非法标签解析，报Unexpected token <，实际运行没问题 - 页面中动态插入的
<div id="content"></div>在校验时不存在，但 JS 运行后才生成——校验器看不到这部分，也就无法确认语义完整性
Service Worker 缓存 HTML 后如何验证结构一致性
真正要确认“离线时用户看到的 HTML 是否和线上一致”，得绕过浏览器渲染层，直接比对缓存内容。关键不是看页面能不能打开，而是看缓存的响应体是否与源文件完全相同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
sw.js的fetch事件监听里，对 HTML 请求（如event.request.destination === 'document'）加日志：console.log('cached HTML hash:', await crypto.subtle.digest('SHA-256', await response.arrayBuffer())) - 用
caches.open('my-cache').match('/index.html')手动取出缓存响应，调用response.text()获取原始 HTML 字符串，再和构建产物目录下的dist/index.html做字符串比对（注意剔除构建时注入的时间戳或哈希注释） - 避免用
response.clone().json()—— HTML 响应不是 JSON，会直接抛Unexpected token <错误 - Chrome DevTools 的 Application → Cache Storage 里只能看 URL 列表，点开单个条目看不到原始 HTML 内容，必须用 JS 脚本提取
HTML 文件损坏或被篡改时的离线恢复路径
离线环境下没有服务器兜底，一旦缓存的 HTML 文件损坏（比如传输中断、磁盘写入异常），用户打开就是白屏或解析错误。此时恢复依赖本地已有副本，而非远程拉取。
有效恢复手段按优先级排列：
- 构建阶段生成带哈希的 HTML 文件名（如
index.a1b2c3d4.html），配合CacheStorage的 versioned cache name（如'cache-v2'），旧缓存可安全清理，新缓存独立写入，避免覆盖污染 - 在注册 SW 前，用
fetch('/index.html')预检主 HTML 是否可读且 status === 200，失败则跳过注册，防止缓存一个坏文件 - 页面加载时监听
window.addEventListener('error', e => { if (e.filename === 'index.html') {...} })，捕获解析错误后触发降级：从 IndexedDB 中读取上一次成功缓存的 HTML 备份（需提前在 install 阶段存入） - 不要依赖
localStorage.setItem('html-backup', doc.documentElement.outerHTML)—— 字符串过大时会触发 QUOTA_EXCEEDED_ERR，且无法还原<script>执行上下文
离线重载 HTML 时 DOM 状态丢失怎么办
用户离线刷新页面，Service Worker 返回缓存的 HTML，但 JS 初始化逻辑可能因缓存策略（如 stale-while-revalidate）没加载完就执行，导致 DOM 元素存在但绑定失效，或者表单值丢失。
这不是 HTML 结构问题，而是生命周期错配：
- 别在
DOMContentLoaded里直接操作表单控件值——离线时 JS 可能还没 fetch 完，先用document.querySelector('form').dataset.offline = 'true'标记状态 - 把关键状态（如输入框内容、选中 tab）存进 IndexedDB，而不是仅靠 JS 变量；页面重载后从 DB 恢复，比依赖 HTML 初始 value 属性更可靠
- HTML 中的
<input value="xxx">在离线重载时确实会被保留，但如果是 JS 动态赋值（el.value = 'yyy'），刷新后就清空了——这种差异容易被忽略 - 强制刷新（Ctrl+F5）在离线时无效，它仍走 SW 缓存；真要跳过缓存，得在 SW 里对特定请求加 bypass logic，比如匹配
request.url.includes('force-reload')
