ID定位本身不防重绘，关键在减少操作频次、精准更新范围、延迟渲染；需结合内存模型、diff算法、节点清理及requestAnimationFrame节流。
直接用 ID 定位无法防止 DOM 重绘，关键在于避免触发重排重绘的 DOM 操作本身。ID 只是选择器，选中后若执行插入、删除、样式变更等操作，照样引发重绘；真正起作用的是“减少操作频次 + 精准更新范围 + 延迟渲染”。
聚焦可视区域，只更新必要节点
高频排版（如连续加粗、缩进、换行）时，不要每次操作都遍历整个编辑器内容。利用 ID 快速定位到当前操作段落或容器块，再仅修改该节点及其直系子节点。
- 给每个逻辑段落（如 paragraph、list-item）分配唯一 ID，例如：
<p id="p-123">内容</p> - 监听格式操作事件时，通过
document.getSelection().anchorNode向上查找最近带 ID 的父容器，锁定目标元素 - 所有 DOM 修改（如插入
<strong>、调整style.marginLeft）仅限该 ID 节点内部，不触及其他区块
批量合并操作，用 requestAnimationFrame 节流
用户快速连按 Ctrl+B 多次，不应立刻执行 5 次 DOM 更新。应把多次请求攒在一起，在下一帧统一处理。
- 用
requestAnimationFrame包裹 DOM 更新逻辑，确保浏览器一次重绘涵盖全部变化 - 维护一个待处理队列，相同 ID 节点的多次格式操作自动合并（例如：两次“加粗”只记一次，避免嵌套
<strong><strong>...） - RoosterJS 和 CKEditor5 内置了类似机制，启用
enableDomOptimization: true或throttleRendering: 100即可生效
用虚拟 DOM 或文档模型替代直接 DOM 操作
ID 定位更适合配合内存中的结构模型使用，而非直接操作真实 DOM。
- 将编辑器内容抽象为 JSON 模型（如 Slate 的
Node树），每个节点含id字段 - 排版操作先更新模型（如
setNodes(editor, { bold: true }, { at: selection })），不碰 DOM - 模型变更后，通过 diff 算法计算出最小 DOM 补丁，仅更新 ID 对应的真实节点及其必要子树
- 这样即使用户高频操作，真实 DOM 变更次数大幅下降，重绘压力自然缓解
禁用冗余样式与空节点，从根源压缩重绘量
很多卡顿来自看不见的“脏节点”——比如无样式的 <span>、重复包裹的格式标签、空文本节点。ID 定位后可针对性清理。
- 在 ID 节点内执行排版前，先运行优化函数：移除无用
span、合并相邻文本节点、折叠空行 - 参考 RoosterJS 的
removeUnnecessarySpan.ts和mergeNode.ts实现逻辑 - 例如：用户对某段落（
id="p-456"）连续点击斜体按钮 3 次，最终只保留一层<em>，而不是三层嵌套
