不安全，但快；会重写子树、重建dom、丢失事件监听器和引用；适用纯内容替换场景，避免循环拼接，需用DOMPurify过滤；现代推荐replaceChildren()或append()。
直接修改 innerhtml 安全吗？
不安全，但快。它会完全重写子树，触发浏览器重新解析 HTML、重建 DOM 节点、丢弃已绑定的事件监听器和已有的引用。
常见错误现象：document.getElementById('list').innerHTML += '
' 看似简洁，实则每次执行都销毁并重建全部
addEventListener 全失效。
适用场景：内容完全替换、无交互逻辑、性能敏感且结构简单（如纯文本仪表盘）。
- 永远避免在循环中拼接字符串再赋值给
innerHTML，易 xss 且性能差 - 若必须用，先做
DOMPurify.sanitize()过滤输入（尤其含用户数据时） - 现代替代：用
element.replaceChildren(...)更可控（见下一条）
replaceChildren() 和 append() 哪个更高效？
replaceChildren() 在清空 + 批量插入时更快；append() 更适合增量添加，且支持多种参数类型（节点、字符串、片段）。
立即学习“Java免费学习笔记（深入）”；
性能差异明显：对 100 个节点批量更新，replaceChildren() 比循环调用 appendChild() 快 3–5 倍（chrome 120+ 测试），因浏览器可一次性布局计算。
const list = document.getElementById('list'); // ✅ 推荐：一次清空并插入全部新节点 list.replaceChildren(...newItems.map(item => { const li = document.createElement('li'); li.textContent = item; return li; })); // ✅ 也推荐：追加单个或多个节点（支持字符串自动转文本节点） list.append(newnode, 'plain text', ...moreNodes);注意：append() 不接受类数组（如 HTMLCollection），需展开；replaceChildren() 传空参即清空，比 innerHTML = '' 更轻量。
为什么 DocumentFragment 还值得用？
在旧版浏览器（如 IE11）或需要精细控制插入时机时，DocumentFragment 仍是离屏构建节点树最稳定的方式——它不触发重排，且所有子节点插入后自动“移动”而非复制。
容易踩的坑：fragment.appendChild(node) 后，node 从原位置消失（是移动，不是克隆），这点常被忽略导致节点丢失。
- 现代开发中，
replaceChildren()和append()已覆盖大部分场景，DocumentFragment可作为兜底方案 - 若需多次复用同一组节点结构（如模板渲染），用
document.createElement('template')+content.cloneNode(true)更合适 - 不要对
DocumentFragment调用querySelector—— 它不参与样式计算，某些伪类（如:hover）无效
动态绑定事件该用委托还是逐个 addEventListener？
对频繁增删子节点的容器（如列表、表格），必须用事件委托；否则每次新增节点都要重复绑定，内存泄漏风险高，且移除节点时容易漏掉清理。
典型错误：items.forEach(el => el.addEventListener('click', handler))，后续 el.remove() 后监听器仍驻留内存（尤其 handler 是闭包时）。
const list = document.getElementById('list'); // ✅ 正确：委托到父容器，用 event.target 判断来源 list.addEventListener('click', e => { if (e.target.matches('li.editable')) { handleEdit(e.target); } });注意：event.stopPropagation() 会阻断委托链，调试时留意是否意外截断；委托不适用于自定义事件（dispatchEvent）或需要捕获阶段干预的场景。
复杂点在于：委托要求父容器稳定存在、事件路径清晰；如果容器本身也动态替换（比如整个 #list 被 replaceChildren() 替换），委托监听器必须绑定在更高层静态节点（如 body 或主内容区）上。