核心是“先比再更”：新数据不直接全量替换，而是与旧数据结构化对比，只更新变化部分，减少DOM操作、避免闪屏和焦点丢失；用diff库识别增删改字段并定位路径，结合data-path标记精准更新对应节点；用DocumentFragment批量操作列表内容，提升渲染性能；通过requestIdleCallback异步处理diff与渲染，配合骨架屏优化弱网体验；表单场景则通过快照+字段级比对标记修改项，支持PATCH增量提交。
核心是“先比再更”：拿到新数据后，不直接全量替换，而是和旧数据做结构化对比，只更新真正变化的部分。这既减少 DOM 操作开销，也避免闪屏、焦点丢失等问题。
用 diff 库精准定位变更点
当接口返回的是结构化数据（如用户配置、表格行、JSON 配置项），推荐用轻量 diff 工具快速识别增删改字段：
- 安装 diff 库：
npm install diff - 对两个对象调用
diff.diffJson(oldData, newData)，它会返回带操作类型（added/deleted/updated）和路径（如["users", "0", "name"]）的差异数组 - 根据路径映射到对应 DOM 元素（例如用
data-path="users.0.name"属性标记节点），只修改/插入/移除目标节点，跳过未变区域
注意：这个库不操作 DOM，但它告诉你“哪里变了”，是手动局部更新的可靠依据。
用 documentFragment 批量更新列表类内容
适合表格、卡片流、日志列表等重复结构大量变动的场景，避免逐个 append 触发多次重排：
立即学习“Java免费学习笔记（深入）”；
- 先创建
const frag = document.createDocumentFragment() - 遍历新数据，对每项生成完整 DOM 节点（如
<tr><td>...</td></tr>），并追加到 frag - 最后用
container.replaceChildren(frag)一次性替换整个容器内容 - 若只需局部增删（比如新增一行、删除某条），可结合 diff 结果，只构建变动部分的 fragment 再插入/移除
结合请求与渲染节奏做平滑更新
尤其在弱网或长列表场景下，别让 Diff 和渲染阻塞主线程：
- 把 diff 计算和 DOM 构建逻辑放进
requestIdleCallback，浏览器空闲时才执行 - 用
shouldYield()判断是否该让出控制权，防止单次处理超 50ms 影响交互响应 - 配合 loading 状态或骨架屏，让用户感知“正在更新”，而不是白屏等待
表单类场景：快照 + 字段级比对
适用于编辑页加载后用户修改再提交的流程，重点不是刷新，而是“标出改了哪几处”：
- 页面加载完成时，深拷贝原始表单值：
const original = JSON.parse(JSON.stringify(data)) - 提交前调用对比函数，遍历所有字段，找出
original[key] !== current[key]的项 - 给对应输入框添加
class="modified"或显示小标签“已修改”，也可生成变更摘要浮层 - 后端如支持 PATCH，还能只传差异字段，减少传输体积
