协作编辑中的变更追踪挑战

在开发多人在线文档或代码协作平台时，核心难点之一是如何高效呈现内容变更。传统的行级对比难以处理富文本中的格式保留，而直接基于 DOM 树的比对则消耗过多内存。为了解决这一矛盾，引入 Google 开源的差异化算法库 diff-match-patch 并结合现代化编辑器框架 Quill 是业界常见的高优解法。

本文重点探讨如何利用算法优化对比性能，实现毫秒级的差异渲染，并解决富文本属性丢失的问题。

技术栈评估与选型

面对多种文本对比方案，我们需要权衡算法复杂度与渲染效果。以下是主流方案的横向测评：

DMP 基于 Myers 差分算法改进，利用位向量加速匹配过程，非常适合浏览器端环境。它允许我们将复杂的字符串操作转化为高效的二进制逻辑运算。

核心流程解析

差异计算并非一步到位，通常包含三个关键阶段：生成、清洗、应用。

为了平衡用户体验与计算精度，建议在配置中启用 Diff_Timeout 参数防止长文阻塞主线程，并通过 diff_cleanupSemantic 合并过细的片段以提升人类阅读体验。

工程化落地指南

1. 基础架构搭建

首先构建双窗口对比界面，加载必要的前端资源。建议使用 CDN 分发静态库以加快加载速度。

<div id="container">
  <div class="split-pane">
    <div id="src-editor"></div>
    <div id="dst-editor"></div>
  </div>
  <button onclick="renderCompare()">分析差异</button>
  <div id="view-port"></div>
</div>

<style>
  .split-pane { display: flex; }
  .insert-mark { background: #dafbe5; }
  .delete-mark { text-decoration: line-through; background: #ffdada; }
  .editor-box { height: 320px; border: 1px solid #ddd; margin: 0 10px; }
</style>

2. 封装差异引擎类

为了避免全局函数污染，我们采用面向对象的方式封装逻辑。重构后的核心代码如下，实现了更清晰的职责分离：

/**
 * 文档差异对比管理类
 */
class DocumentDiffEngine {
  constructor() {
    this.dmp = new diff_match_patch();
    this.dmp.Diff_Timeout = 0.5; // 降低超时阈值以防卡顿
    this.dmp.Diff_EditCost = 4;
    
    // 实例化两个编辑器
    this.sourceInstance = new Quill('#src-editor', { theme: 'snow' });
    this.targetInstance = new Quill('#dst-editor', { theme: 'snow' });
  }

  /**
   * 获取纯净文本用于底层比对
   */
  getPlainText(contentDelta) {
    return contentDelta.ops.map(op => op.insert || '').join('');
  }

  /**
   * 执行差异计算并返回可视化 HTML
   */
  generateComparison() {
    const rawTextA = this.getPlainText(this.sourceInstance.getContents());
    const rawTextB = this.getPlainText(this.targetInstance.getContents());

    const startTime = performance.now();
    let operations = this.dmp.diff_main(rawTextA, rawTextB);
    this.dmp.diff_cleanupSemantic(operations);
    const endTime = performance.now();

    // 使用 DMP 自带方法生成基础 HTML
    let htmlOutput = this.dmp.diff_prettyHtml(operations);

    // 替换默认内联样式为自定义类名以便主题定制
    htmlOutput = htmlOutput.replace(/]*>/g, '')
                          .replace(/<\/ins>/g, '')
                          .replace(/]*>/g, '')
                          .replace(/<\/del>/g, '');

    document.getElementById('view-port').innerHTML = 
      `<p>耗时：${(endTime-startTime).toFixed(2)}ms | 变动数：${operations.length}</p>${htmlOutput}`;
  }
}

// 初始化引擎实例
const engine = new DocumentDiffEngine();
window.renderCompare = () => engine.generateComparison();

3. 高级特性：保留富文本属性

直接使用纯文本对比会丢失加粗、颜色等标记。若要完整保留 Delta 结构，需要编写一个映射层，将文本差异回填到原格式的上下文中：

function mergeStylesIntoDiff(baseDelta, changes) {
  const resultOps = [];
  let baseIndex = 0;
  let targetIndex = 0;
  
  // 遍历每一段变化
  for (const [type, text] of changes) {
    if (type === 0) { 
      // 未变动的部分，优先从源文本提取样式
      const attrs = this.findAttributeAt(baseIndex, text.length);
      resultOps.push({ insert: text, attributes: attrs });
      baseIndex += text.length;
      targetIndex += text.length;
    } else if (type === 1) {
      // 新增内容，标记绿色背景，可选继承目标样式
      resultOps.push({ 
        insert: text, 
        attributes: { backgroundColor: '#e6ffe6', ...this.getCurrentSelectionStyle() } 
      });
      targetIndex += text.length;
    } else {
      // 删除内容，标记红色背景及删除线
      resultOps.push({ 
        insert: text, 
        attributes: { backgroundColor: '#ffe6e6', strikethrough: true } 
      });
      baseIndex += text.length;
    }
  }
  return new Quill.Delta(resultOps);
}

4. 冲突检测机制

在多人同时编辑同一区域时，简单的"最后写入生效"会导致数据丢失。我们可以利用 DMP 计算双方内容的交集与补集，标记出潜在的冲突区块：

function detectConflicts(localVersion, remoteVersion) {
  const localTxt = localVersion.getText();
  const remoteTxt = remoteVersion.getText();
  
  const diffOps = dmp.diff_main(localTxt, remoteTxt);
  dmp.diff_cleanupSemantic(diffOps);
  
  const conflictMarker = [];
  
  for (const [action, segment] of diffOps) {
    if (action !== DIFF_EQUAL && segment.length > 3) {
      // 识别超过 3 个字符的非一致变更为潜在冲突
      conflictMarker.push({
        range: calculateRange(segment, action === DIFF_INSERT ? remoteVersion : localVersion),
        type: action === DIFF_INSERT ? 'remote_added' : 'local_deleted',
        severity: 'high'
      });
    }
  }
  return conflictMarker;
}

性能调优策略

当文档篇幅超过 1 万字时，单次同步计算可能阻塞 UI 线程。推荐以下两种方案：

A. 分块并行处理

将大文档按固定长度切片，分别计算后拼接结果。

async function splitAndCompute(textA, textB, blockSize = 1500) {
  const slicesA = textA.match(new RegExp(`.{1,${blockSize}}`, 'gs')) || [''];
  const slicesB = textB.match(new RegExp(`.{1,${blockSize}}`, 'gs')) || [''];
  const finalDiffs = [];
  
  await Promise.all(slicesA.map((chunk, i) => {
    const currentDiff = dmp.diff_main(chunk, slicesB[i] || '');
    dmp.diff_cleanupSemantic(currentDiff);
    finalDiffs.push(...currentDiff);
  }));
  
  return finalDiffs;
}

B. Web Worker 隔离计算

将密集运算移至后台线程，确保编辑器交互不卡顿。

// worker.js (后台脚本)
self.onmessage = function(e) {
  const { txt1, txt2 } = e.data;
  const engine = new diff_match_patch();
  const res = engine.diff_main(txt1, txt2);
  self.postMessage(res);
};

// Main Thread
const bgWorker = new Worker('worker.js');
bgWorker.onmessage = (event) => {
  updateUI(event.data);
};
document.getElementById('compare-btn').onclick = () => {
  const t1 = editor1.getText();
  const t2 = editor2.getText();
  bgWorker.postMessage({ txt1: t1, txt2: t2 });
};

系统架构图示

完整的协作流涉及客户端缓存、服务端合并及实时推送环节。

部署注意事项

• 构建压缩：生产环境应通过 UglifyJS 或 Terser 对 DMP 库进行二次压缩，去除非必要日志输出。
• 降级处理：针对老旧浏览器，提供简化版比对逻辑作为 Fallback 方案，避免页面崩溃。
• 异常捕获：所有异步计算包裹在 try-catch 块中，一旦抛出错误应提示用户刷新而非静默失败。