虚拟dom差分算法的核心lcs思想被迁移用于协作文档比对，通过行级、词级或块级切分文本，结合哈希预处理、结构化patch输出及协作元信息（如用户id、冲突提示），实现高效精准的增量差异识别与渲染。
虚拟 DOM 差分算法本身不直接用于文档文本比对，但它背后的 diff 思想——尤其是基于最长公共子序列（LCS）的增量差异识别逻辑——正是在线协作文档比对功能的核心基础。实际落地时，需将“虚拟 DOM 树对比”范式迁移到“结构化文本单元对比”，并结合协作场景做针对性设计。
明确比对对象：从 DOM 节点转向可编辑文本单元
文档协作比对不是比较 HTML 标签树，而是比较用户输入的语义化内容。关键在于合理切分文本：
- 行级比对：适用于代码、日志、配置文件等，以换行符为界，保留原始段落结构；
- 词级或字级比对：适用于富文本、Markdown 或普通文档，按空格/标点/字符切分，支持细粒度高亮（如“删除了‘优化’，新增了‘重构’”）；
- 块级语义切分：在 CKEditor5 或 Notion 类编辑器中，把标题、列表项、引用块等视为独立“虚拟节点”，每个块带唯一 ID 和类型，便于跨版本追踪移动与重排。
复用 diff 算法内核，但跳过虚拟 DOM 渲染层
不必构建完整虚拟 DOM 树，而是直接调用轻量级 diff 工具链：
- 采用 LCS 动态规划实现（如 Vue3 文本对比器所用），时间复杂度 O(mn)，适合中小规模文档；
- 对长文本（>10k 字）启用启发式优化：先做哈希指纹快速跳过大段相同内容，再对差异区域局部运行 LCS；
- 预处理统一格式：忽略空白符、大小写、全半角，或由用户选择是否开启（例如法律合同比对通常需严格保留空格）；
- 输出结构化 patch：标记每段为 removed、added 或 unchanged，附带原始行号与偏移位置。
协作上下文增强：支持多版本、操作溯源与冲突提示
单次 diff 不足以支撑协作，需叠加协同元信息：
- 每个编辑操作（输入、删除、粘贴）生成带 timestamp + user_id 的操作快照，服务端合并成线性变更流；
- 比对时不仅比“当前版 vs 原始版”，还可比“用户 A 版 vs 用户 B 版”，识别出各自修改区间是否重叠；
- 当两处修改同一段落时，diff 结果中标记为 conflict，前端高亮冲突块并提供“接受左侧/右侧/手动合并”按钮；
- 利用 key 机制类比：给每个段落分配稳定 hash（如内容前 20 字 + 格式标识），即使顺序调整也能关联历史版本。
性能与体验兼顾：前端渲染策略
差异结果无需走完整 Vue/React 渲染流程，推荐直出 HTML 片段：
- 将 diff 输出转换为带 class 的内联 HTML：
<span class="diff-removed">旧内容</span><span class="diff-added">新内容</span>； - 使用
innerHTML批量插入，避免虚拟 DOM 挂载开销；对超长文档启用滚动懒加载（只渲染可视区差异块）； - 搭配语法高亮库（如 highlight.js）对代码块做二次着色，提升可读性；
- 提供“聚焦差异”模式：点击某处修改，自动滚动并高亮所有关联变更，辅助快速审核。
