局部刷新通过复用DOM、样式和JS上下文避免整页重载开销，核心是只更新变化部分：优先Fetch+innerHTML或DocumentFragment批量插入；用classList切换状态；iframe隔离模块；服务端返回增量更新并客户端智能合并。
用局部刷新替代整页重载，核心是避免丢弃已有 DOM 结构、样式状态和 JavaScript 上下文，从而跳过解析 HTML、重建渲染树、重排重绘等高开销流程。它不是“更快地刷新”，而是“根本不去刷新”——只更新真正变化的那部分。
优先用 Fetch + innerHTML 替代 location.reload()
当用户点击“刷新列表”或“加载更多”，不要调用 location.reload()，而是：
- 用
fetch()请求新数据（如 JSON）或完整 HTML 片段（如list-item.html） - 拿到响应后，只替换目标容器内容：
document.getElementById('list').innerHTML = data; - 若返回的是结构化数据（JSON），用 JS 动态生成元素并批量插入 DocumentFragment，避免逐个 append 触发多次重排
用 classList 切换驱动视图，而非反复创建/销毁节点
比如切换主题、展开收起面板、显示隐藏模块，不推荐每次删掉整个区域再重写 HTML：
- 把不同状态对应的内容都保留在 DOM 中，仅通过
el.classList.toggle('is-hidden')控制显隐 - 用 CSS 的
opacity和transform实现淡入/滑动，不触发重排 - 避免在切换时读取
offsetHeight等布局属性——它们会强制同步回流
iframe 局部加载：适合隔离型模块
对嵌入第三方内容、独立表单、后台管理子系统等场景，用 iframe 是成熟且低风险的选择：
立即学习“Java免费学习笔记（深入）”；
- 外层页面保持常驻（播放器、导航栏、登录态），仅 src 指向变化的 iframe 刷新其自身
- 配合
location.replace()更新 iframe src，避免产生多余历史记录 - 用 URL hash 或 History API 同步地址栏，支持前进/后退且不打断主页面逻辑
服务端返回增量更新，客户端智能合并
进一步减少传输与渲染压力，可让后端支持“差分响应”：
- 前端发送当前数据版本号（如 ETag 或 lastModified 时间戳）
- 服务端对比后，只返回新增、修改、删除的项（如
{add:[], update:[], remove:[102, 105]}） - 前端按 ID 查找对应 DOM 节点，执行最小粒度操作：复用、更新 innerText、移除节点
