用 insertAdjacentHTML('beforeend', html) 替代 innerHTML += html 可避免整容器重解析，保留光标、选区、事件和滚动位置；它只解析新增 HTML 并追加末尾，不破坏原有 DOM 状态。
直接用 insertAdjacentHTML('beforeend', html) 替代 innerHTML += html，能避免整容器重解析，保留编辑器光标位置、选区状态和已绑定事件——这是最简单有效的提速方式。
为什么编辑器里 innerHTML += 会丢光标和状态
HTML 编辑器（比如基于 contenteditable 的富文本区域）依赖原生 DOM 状态：当前光标位置、用户选区范围、input 或 textarea 的 value、甚至第三方库绑定的监听器。每次执行 el.innerHTML += newHtml，浏览器必须：
- 把整个容器子树序列化成字符串（触发一次 layout + serialize）
- 拼接新内容后，清空所有子节点
- 重新解析全部 HTML 字符串，重建整个 DOM 子树
结果就是：光标跳回开头、选区消失、自定义 toolbar 按钮事件失效、滚动位置重置。
而 insertAdjacentHTML('beforeend', newHtml) 只解析你传入的 newHtml 字符串，生成新节点后直接插入末尾，原有结构和状态毫发无损。
立即学习“前端免费学习笔记（深入）”；
编辑器场景下 position 参数怎么选才不翻车
对编辑器容器（如 div[contenteditable="true"]）追加内容，统一用 'beforeend'；但要注意几个边界情况：
-
'beforeend'插入的是「容器内部最后一个子节点之后」，不是容器外——它等效于appendChild()，语义清晰且兼容性最好 - 若编辑器内容为空，
'beforeend'仍有效（会插入为第一个子节点），无需额外判断 - 避免用
'afterbegin'往头部插——它在contenteditable区域里可能干扰光标定位逻辑，尤其当已有选区时 -
'beforebegin'和'afterend'要求目标元素已挂载到 DOM，且插入的是兄弟节点，不适合向编辑器主体追加内容
用户输入没转义会导致 XSS，但转义又影响富文本格式
编辑器常需混排纯文本与 HTML 片段（比如插入一个带 class 的按钮，同时允许用户输入含 < 的代码段）。这时候不能一刀切：
- 对可信模板片段（如预设的工具栏按钮、提示框）可直接用
insertAdjacentHTML('beforeend', templateStr) - 对用户自由输入的纯文本内容（如段落文字），优先用
textContent创建文本节点再appendChild，完全规避解析 - 若必须插入用户 HTML（如粘贴富文本），应使用
DOMPurify.sanitize()过滤，而不是简单实体转义——否则<b>加粗</b>会变成纯文本显示 - 绝对不要写：
editor.insertAdjacentHTML('beforeend', '<p>' + userInput + '</p>')
批量插入多条内容时别循环调用
比如从历史记录恢复 20 条日志，或一次性粘贴多段 Markdown 渲染结果。循环 20 次 insertAdjacentHTML 虽比 innerHTML += 好，但仍会触发 20 次微任务和潜在回流。
更优做法：
- 把全部 HTML 字符串拼成一个完整片段，单次调用：
editor.insertAdjacentHTML('beforeend', allItemsHtml) - 若 HTML 片段来自可信源（如服务端渲染好的日志块），也可用
DocumentFragment+innerHTML组合，再appendChild到编辑器——它只解析一次，且不触发重绘 - 注意：不要对
table、tbody等受限元素直接用'beforeend'插tr，旧版浏览器会静默失败；应包装为<tbody><tr>...</tr></tbody>或改用insertRow()
真正容易被忽略的是：编辑器初始化阶段若脚本执行过早（比如放在 <head> 里未加 DOMContentLoaded），document.querySelector('.editor') 可能为 null，导致 insertAdjacentHTML 报 Cannot read property 'insertAdjacentHTML' of null——这个错误不报在插入逻辑里，而在起点就断了。
