innerHTML整块替换最快，但会丢失事件和输入；DocumentFragment可批量优化性能；textContent更安全高效，innerText会触发重排；局部更新需权衡精度与复杂度。
直接修改 innerHTML 会触发重排重绘，但有时它反而是最快的选择
很多人一看到“操作 DOM 就要避免 innerHTML”，就下意识用 createElement + appendChild 套路。其实不是所有场景都适用——如果更新的是整块结构（比如一个列表容器完全替换成新数据），innerHTML 的解析和插入由浏览器原生优化，往往比手动创建 20 个节点还快。
关键看更新粒度：
- ✅ 整块替换（如 document.getElementById('list').innerHTML = newHtml）
- ❌ 在长列表末尾追加一项却清空再重写整个列表
- ⚠️ 含用户输入或已绑定事件的子元素会被销毁（input 值丢失、addEventListener 失效）
批量 DOM 变更必须用 DocumentFragment 或 display: none 隐藏后操作
连续调用 10 次 appendChild，浏览器可能触发 10 次布局计算。把节点先塞进 DocumentFragment，最后一次性挂载，能强制合并渲染：
const frag = document.createDocumentFragment();
for (let i = 0; i < data.length; i++) {
const el = document.createElement('li');
el.textContent = data[i];
frag.appendChild(el);
}
listContainer.appendChild(frag); // 此时才触发一次重排替代方案（尤其适合已有 DOM 结构微调）：
- 把父容器设为 display: none → 批量改子节点 → 再设回 display: block
- 注意：这会短暂闪屏，慎用于首屏关键区域
- 不如 DocumentFragment 稳定，但兼容性更好（IE9+）
用 requestAnimationFrame 控制 DOM 更新时机，避开强制同步布局
下面这段代码极易引发性能问题：
box.style.height = '200px'; console.log(box.offsetHeight); // 强制同步布局！
因为读取 offsetHeight 时，浏览器必须立刻计算样式并布局，打断了原本可合并的渲染流水线。解决方法是把读操作和写操作分开：
立即学习“Java免费学习笔记（深入）”；
- 所有写操作（
style、className、appendChild）放在同一帧开头 - 所有读操作（
offsetTop、getBoundingClientRect()）统一放到requestAnimationFrame回调里
示例：
box.style.transform = 'translateX(100px)';
requestAnimationFrame(() => {
console.log(box.getBoundingClientRect()); // 安全读取
});现代项目优先用 textContent 而非 innerText，但注意它不解析 HTML
textContent 直接设置纯文本，无 XSS 风险、性能高、兼容性好（IE9+）；innerText 会触发重排（要计算样式）、受 CSS 影响（如 display: none 的文本不计入）、IE 下行为不一致。
常见误用场景：
- ✅ 显示用户昵称：el.textContent = user.name
- ❌ 渲染富文本摘要：el.textContent = 'Hello' → 会原样显示标签字符
- ⚠️ 需要保留 HTML 且可信来源才用 innerHTML，否则先用 DOMPurify.sanitize() 过滤
真正难处理的是「局部更新」：比如只改某段文字中的几个字，又不想丢掉已有的事件监听。这时候就得权衡——是用 Range + Text.splitText() 精确切片，还是干脆用虚拟 DOM 库接管？手写容易漏掉 focus 状态、selection 位置、自定义属性等细节。
