文档比对可视化深度话题 — 面试亮点专题 10

🎬 面试开场怎么引出这个话题

「在电力合规平台做了文档比对可视化 — 测评报告要和历史版本对比,标注增/删/改。原来人工逐行看,效率低还易漏。我用 Myers diff 算法做了自动化:章节级先定位差异章节,再对差异章节的表格做单元格级 diff,三色高亮(增绿/删红/改黄)。效率提升 70%+。印象深的是万行文档的 diff 性能 — Myers 是 O(ND),N 大了卡,我把 diff 计算放 Web Worker + 章节级分块。」

✅ 抛出 4 个可深挖的点:① diff 算法 ② 两层比对策略 ③ 可视化 ④ 性能优化。
这是算法落地 + 业务价值结合的好话题,体现你不只是调 API,还能把算法用到实际场景。

业务场景与两层比对策略

📋 业务需求

测评报告版本迭代频繁,合规要求每次修改都要可追溯 — 哪些章节加了、删了、改了。原来人工对比两个版本,几百页报告要一两天,还容易漏。

🧠 两层比对策略(类比找茬游戏)

第一层:章节级 diff — 像书的目录对比,先定位"哪几章变了",没变的章节直接跳过;
第二层:表格级 diff — 对变化的章节,再对里面的表格做单元格级对比。
为什么要两层: 一份报告可能 200 页 10 万字,如果全量做字符级 diff,性能爆炸。先章节级粗筛(快),再对少量变化章节细 diff(慢但量小)。这就是"分层过滤"思想。

类比 Git: Git 的 diff 也是分层的 — 文件级(哪些文件变了)→ hunk 级(文件的哪几行变了)→ 字符级。我们的章节级 + 表格级是同一思想。

Myers diff 算法(核心)

🔑 Myers 算法是什么

Myers diff 是 Git 用的差异算法(Eugene Myers 1986 年论文)。核心思想:把两个序列的 diff 问题,转化成在编辑图(edit graph)上找最短路径。路径上的"向右走"=删除,"向下走"=新增,"对角走"=相同(保留)。

LCS(最长公共子序列)

动态规划,DP 表 O(M×N)
找两个序列的最长公共部分
diff = 删非公共 + 加新增
缺点:空间 O(M×N) 大

Myers diff

时间 O(N+D²),D=差异数
差异少时极快(接近线性)
空间 O(D²) 可优化
Git/VS Code 都用它

不用自己写: 前端有现成库 jsdiff(diffLines/diffWords/diffChars)和 diff-match-patch(Google 出品)。我们用 jsdiff 的 diffLines 做章节级,diffWords 做表格单元格内文本对比。重点是懂原理 + 会用,不是从零实现。

📋 实战用法

import { diffLines, diffWords } from 'diff'

// 章节级:对比两个版本的章节文本(按行)
const chapterDiff = diffLines(oldChapterText, newChapterText)
// 返回: [{value: '相同行', added: false, removed: false},
//        {value: '新加的行', added: true},
//        {value: '删掉的行', removed: true}, ...]

// 单元格内文字级:对比表格单元格内容
const cellDiff = diffWords(oldCellValue, newCellValue)

表格 diff 的难点

⚠️ 表格比文本难

表格是二维结构,行/列都可能增删改,还有合并单元格。文本 diff 是一维的(行/字符序列),表格是二维的,不能直接套。

我们的方案: ① 行优先:先按行 diff(把每行当一个"句子"),找出增删改的行;② 行内单元格对比:对"改"的行(行数相同但内容变),再对比每个单元格;③ 合并单元格特殊处理:合并状态变化单独标记。

坑: 表格行如果顺序变了但内容没变(比如行重排),简单 diff 会报成"全删全增"。要先用行哈希做匹配(内容相同的行对齐),再 diff。类似 Git 的"移动检测"。

三色高亮可视化

类型	颜色	交互
新增(added)	绿色背景	左侧无,右侧有
删除(removed)	红色背景 + 删除线	左侧有,右侧无
修改(modified)	黄色背景	行数相同内容变,字符级高亮变化部分

📋 双栏 diff 视图(左右对照)

<!-- 左右双栏,左侧旧版,右侧新版 -->
<div class="diff-view">
  <div class="diff-col old">
    <div v-for="line in oldLines"
         :class="line.removed ? 'removed' : ''">
      {{ line.text }}
    </div>
  </div>
  <div class="diff-col new">
    <div v-for="line in newLines"
         :class="line.added ? 'added' : (line.modified ? 'modified' : '')">
      <!-- 修改的行,字符级高亮 -->
      <span v-for="part in line.parts"
            :class="part.added ? 'add' : (part.removed ? 'del' : '')">
        {{ part.value }}
      </span>
    </div>
  </div>
</div>

交互: ① 差异导航:上一处/下一处差异按钮,jump 到下一个 diff;② 差异统计面板:显示"增 X 行 / 删 Y 行 / 改 Z 处";③ 展开/折叠相同部分:相同的大段折叠,只看差异(类似 GitHub PR 的 diff 视图)。

万行文档的性能

⚠️ 性能问题

万行文档全量 diff,Myers 算法 O(ND),D(差异)多时变慢,且 diff 期间阻塞主线程,UI 卡死。渲染几万行 diff 结果,DOM 也扛不住。

方案: ① Web Worker 算 diff:不阻塞主线程;② 章节分块:每个章节单独 diff,小批量;③ 虚拟滚动渲染:只渲染可视区 diff 行(接虚拟列表);④ 懒 diff:先显示章节级有无变化,点开才算字符级。

关键收益: Web Worker 把 diff 计算移出主线程,用户操作不卡;虚拟滚动把 DOM 从万级降到几十,渲染不卡。这两招组合,万行文档 diff 也能流畅。

高频追问 & 容易翻车点

1diff 算法原理?Myers 和 LCS 区别? 中等

diff 本质: 找两个序列的最少编辑操作(增/删/改)。
LCS: 动态规划找最长公共子序列,空间时间 O(M×N),简单但慢。
Myers: 在编辑图上找最短路径,时间 O(N+D²),D=差异数。差异少时极快(接近线性),所以 Git/VS Code 用它。我们用 jsdiff 库(内部 Myers)。

💬 追问「为什么不自己写?」→ jsdiff/diff-match-patch 经过大量验证,边界 case 都处理了,自己写容易出 bug。会用 + 懂原理就够。

2表格 diff 怎么做?和文本 diff 区别? 中等

文本是一维序列,表格是二维结构。 不能直接套文本 diff。方案:① 行优先 — 把每行当"句子"做行级 diff;② 行内单元格对比 — 对"改"的行对比每个单元格;③ 合并单元格特殊标记。坑: 行重排(顺序变内容没变)要先用行哈希匹配,否则报成全删全增。

3大文档 diff 性能怎么办? 中等

① Web Worker:diff 计算移出主线程,UI 不卡;② 章节分块:每章节单独 diff,小批量;③ 虚拟滚动:只渲染可视区 diff 行,DOM 从万级降到几十;④ 懒 diff:先章节级粗判,点开才字符级。这四招组合,万行文档流畅。

4为什么两层比对(章节+表格)? 基础

分层过滤思想。 万行文档全量字符 diff 性能爆炸。先章节级粗筛(快),定位变化的章节,再对少量变化章节细 diff。类似 Git 的文件→hunk→字符分层。90% 章节没变,直接跳过,只算 10% 变化的,效率高。

5diff 结果怎么存? 基础

diff 结果是结构化数据(op 数组:每项有 value/added/removed),存 JSON 到后端。展示时前端解析渲染。也可以存"差异摘要"(增 X 删 Y 改 Z)用于列表展示,点开看详情。不存整个 diff HTML(太占空间且难维护),存结构化数据,渲染时生成。

30 秒电梯陈述(背熟)

🎤 30 秒版

「在合规平台做了文档比对可视化,测评报告版本对比。原来人工逐行看,我用 Myers diff 算法自动化。策略是两层比对:章节级先定位变化章节(快),再对变化章节的表格做单元格级 diff(细)。三色高亮增删改,效率提升 70%。印象深的是万行文档性能 — diff 算法放 Web Worker 不卡主线程,渲染接虚拟滚动,只渲染可视区。」

这段话的优势:
① 有算法(Myers diff)→ 技术深度
② 有业务价值(效率+70%)→ 可量化
③ 有策略(两层比对)→ 系统思考
④ 有性能优化(Worker+虚拟滚动)→ 工程能力
这是"算法落地业务"的典型话题,面试官喜欢这种有技术含量又有实际收益的。

面试亮点专题 10 — 章节级文档差异比对深度话题

Myers diff · 两层比对 · 表格 diff · 三色高亮 · Web Worker · 虚拟滚动

← 返回专题首页