直接用 insertadjacenthtml 替代 innerhtml += 能显著提升长文档编辑器的插入性能——它不重建已有 dom，只解析新字符串，保留光标位置、选区、事件绑定和输入状态。
直接用 insertAdjacentHTML 替代 innerHTML += 能显著提升长文档编辑器的插入性能——它不重建已有 DOM，只解析新字符串，保留光标位置、选区、事件绑定和输入状态。
为什么编辑器里 innerHTML += 会卡顿甚至丢光标
长文档容器（如 contenteditable 区域或自研编辑器根节点）若用 innerHTML += htmlString 追加内容，浏览器必须：
- 先序列化整个容器的 DOM 树为 HTML 字符串（含成百上千个节点）
- 拼接新字符串后，再全量反序列化重建所有子节点
- 导致 input 光标重置、
selection丢失、已绑定的keydown/input监听器全部失效 - 在 10k+ 字符文档中，单次操作可能触发 50ms+ 的强制同步回流
用 beforeend 插入新段落时必须检查父节点是否已挂载
编辑器初始化脚本若放在 或未加 defer，document.querySelector('.editor') 可能返回 null，调用 insertAdjacentHTML 会报 Cannot read property 'insertAdjacentHTML' of null。
- ✅ 正确做法：监听
DOMContentLoaded，或用if (editorEl && editorEl.isConnected)双重校验 - ⚠️ 不要依赖
setTimeout或requestIdleCallback延迟插入——光标可能已移动，插入位置错乱 - ? 编辑器常需动态创建容器（如悬浮工具栏），应统一用
afterbegin插入到body开头，避免影响主编辑区渲染流
批量插入多行内容时别循环调用 insertAdjacentHTML
逐行插入 100 条日志或 Markdown 段落时，循环 100 次 insertAdjacentHTML('beforeend', line) 仍会触发 100 次微任务和样式计算，不如合并。
- ✅ 推荐：先用数组
.push()收集所有 HTML 字符串，再join('')后单次insertAdjacentHTML('beforeend', fullHtml) - ⚠️ 注意：若每行含用户输入，必须提前转义——
insertAdjacentHTML不做任何 XSS 防护，`<div>${userInput}</div>`是高危写法 - ? 更安全的替代：对纯文本段落，用
document.createElement('div').textContent = line+appendChild()，完全规避 HTML 解析开销
插入后无法立即 querySelector 新节点？那是时机问题
编辑器中常需插入后立刻给新按钮绑事件、聚焦新输入框，但 insertAdjacentHTML 同步返回，DOM 渲染却异步。
- ✅ 立即可用：新节点已存在于 DOM 树中，
querySelector能立刻取到（无需setTimeout） - ⚠️ 但注意：若插入的是
<input>，focus()必须在插入后同步调用，否则焦点可能被后续脚本抢占 - ? 复杂交互（如插入带 toolbar 的代码块）建议用事件委托：监听编辑器容器的
click，用event.target.matches('[data-action="run"]')分发
真正卡顿的从来不是 insertAdjacentHTML 本身，而是没控制好插入粒度、忽略节点挂载状态、或把 XSS 防护甩给「看起来没问题」的模板拼接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
