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