DOM快照需捕获真实运行时状态而非HTML字符串，包括表单值、滚动位置、Canvas像素等；回滚应通过状态注入而非结构重载，且仅在明确返回行为时触发。
DOM 快照不是存 HTML 字符串，而是捕获可复现的节点状态
直接 document.documentElement.outerHTML 序列化会丢失事件监听器、Canvas 绘图上下文、WebGL 状态、表单输入值（input.value 不反映在 HTML 属性中）、checked/selected 等运行时属性。快照必须包含“真实 DOM 状态”，而非仅结构。
真正可用的快照应包含：
- 用
cloneNode(true)深拷贝目标容器，再手动补全关键运行时字段：如遍历所有input、textarea、select，保存.value、.checked、.selectedIndex - 记录
scrollTop/scrollLeft（尤其对自定义滚动容器） - 若含 Canvas，需调用
canvas.toDataURL()或canvas.getContext('2d').getImageData()保存像素数据（注意跨域限制） - 避免递归遍历整个
document——只快照业务相关区域（如id="app"或当前路由视图容器）
回滚 ≠ 替换 outerHTML，而要最小化重渲染与状态断裂
用 container.innerHTML = snapshotHTML 或 container.replaceChild(newClone, old) 会清空所有绑定的事件、中断定时器、销毁 Vue/React 组件实例，导致白屏或交互失效。生产环境严禁这么做。
安全回滚的关键是“状态注入”而非“结构重载”：
立即学习“前端免费学习笔记（深入）”；
- 对 Vue/React 应用：快照应转为可序列化的 state 对象（如
{ form: { name: 'Alice', agree: true }, scroll: 420 }），回滚时触发组件重新响应式更新，而非操作 DOM - 对纯 JS 控制的 DOM：用
Object.assign(el, snapshotProps)恢复属性，用el.setAttribute('data-snapshot-id', id)标记版本，避免覆盖用户新输入 - 滚动恢复必须等 DOM 就绪后执行：
requestAnimationFrame(() => el.scrollTop = savedScroll)，否则可能被骨架屏或懒加载内容覆盖 - 若快照含动态插入的第三方脚本（如统计 SDK），回滚时不能重复执行——需在快照中记录已加载的
script.src列表并跳过
HTMLCollection 实时性会让快照逻辑出错，优先用静态 NodeList
如果你在快照前用 document.querySelectorAll('.item') 获取节点列表，没问题；但若用 container.children 或 getElementsByClassName，后续任何 DOM 变更（包括你自己的快照清理逻辑）都会实时改变该集合长度和顺序，导致循环删除漏项、索引越界或无限循环。
正确做法：
- 快照生成阶段，一律用
querySelectorAll或Array.from(container.children)转为静态数组 - 不要在 for 循环中边遍历
HTMLCollection边removeChild——改用倒序遍历或先收集待删节点再批量移除 - 对需长期持有引用的节点（如大屏池化节点），用
Map缓存并绑定唯一dataset.id，不依赖集合索引
回滚触发时机必须区分 navigation 类型，不能无条件恢复
用户从首页点击进入某页，或刷新页面，都不该恢复快照——否则会强制滚动到上次位置、重填表单，体验极差。只有明确的“返回行为”才应触发。
判断依据优先级如下：
- 首选：
performance.getEntriesByType('navigation')[0]?.type === 'back_forward'（Chrome/Firefox/Edge 支持） - 降级：
history.state?.from === 'back'（需你在 pushState 时主动写入） - 兜底：用
sessionStorage记录上一页面路径 + 时间戳，进入新页时比对document.referrer和时间差（ - 所有判断都必须包裹
try/catch，iOS 隐私模式下performance.getEntriesByType可能抛错
快照本身容易做，但让回滚不打断用户当前意图、不破坏框架生命周期、不引发内存泄漏，才是真正难的部分。每个节点是否该复用、每个状态是否该覆盖、每次滚动是否该生效——这些决策点没有银弹，只能靠场景收口。
