直接用diff-match-patch浏览器端实现html差异高亮，因其纯字符串级对比、无需后端、不解析dom、内置xss防护（需配合dompurify转义）、支持字符级精准标红/绿（如lohi），且5分钟可完成可交互页面开发；而diff命令和git diff仅输出unified patch格式，需额外工具转换，且无自动转义易致xss。
直接用 diff-match-patch 浏览器端跑，5 分钟就能出可交互的 HTML 差异高亮页面——不需要后端、不传文件、不解析 DOM，只做字符串级对比，安全又够用。
为什么不用 diff 命令或 git diff 直接生成 HTML
因为它们输出的是统一 patch 格式（@@ -1,3 +1,4 @@ 开头那种），不是浏览器能直接渲染的 HTML；想转成带 <ins></ins>/<del></del> 的高亮页面，还得额外管道处理（比如接 pygmentize 或 diff2html-cli），本地没装对应工具就卡住。更重要的是：这些命令对 HTML 字符串本身不做转义，如果用户输入含 <script>alert(1)</script>，直接插入页面会执行。
用 diff-match-patch 实现行内高亮的关键三步
它不碰 DOM，只比字符串，所以必须自己处理 HTML 特殊字符转义和样式注入：
- 先对两个 HTML 字符串做
encodeURIComponent编码（或用DOMPurify.sanitize()过滤），避免 XSS 和标签解析错乱 - 调用
dmp.diff_main()得到操作数组，再用dmp.diff_cleanupSemantic()合并相邻的增删块（比如把“删 a、增 b”合成“替 a→b”） - 用
dmp.diff_prettyHtml()生成带<ins></ins>/<del></del>的 HTML，但默认样式极简，需手动加 CSS 控制颜色、背景、字体粗细
示例片段：
const dmp = new diff_match_patch();
const safeHtml1 = DOMPurify.sanitize(html1);
const safeHtml2 = DOMPurify.sanitize(html2);
const diffs = dmp.diff_main(safeHtml1, safeHtml2);
dmp.diff_cleanupSemantic(diffs);
const html = dmp.diff_prettyHtml(diffs);
document.getElementById('diff').innerHTML = html;
记得在 CSS 里定义：
ins { background: #d4edda; text-decoration: none; }
del { background: #f8d7da; text-decoration: line-through; }
对比大 HTML 文件时性能掉得快，怎么压住
dmp.diff_main() 在文本超 50KB 后响应明显变慢，不是算法问题，是 JS 单线程卡在长字符串遍历上：
- 前端限制输入长度，比如截断前 1000 行或 64KB，超出部分提示“内容过长，请精简后重试”
- 用
setTimeout包一层，避免阻塞主线程导致页面冻结 - 不推荐用
Web Worker——diff-match-patch内部大量用正则和字符串方法，Worker 里无法直接复用原库实例，迁移成本高 - 真要处理整页 HTML（比如笔记系统版本对比），先用
lxml或html5lib在服务端标准化格式（去空格、归一化属性顺序、补全自闭合标签），再传给前端比，效果更稳
diff2html 和 diff-match-patch 到底选哪个
看你要不要“语义理解”：
-
diff2html只负责把已有 unified diff（比如diff -u输出）渲染成带颜色的 HTML，它不计算差异，也不懂 HTML 结构——class="old"变成class="new"，它只会标整行，不会单独高亮old和new -
diff-match-patch自己算差异，支持字符级比对，能精准标出<p>hel<del>lo</del><ins>hi</ins></p>，但前提是输入已清洗，否则<p>\n hello\n</p>和<p>hello</p>会被当成完全不同的字符串
最容易被忽略的一点：两者都不处理注释、<script></script> 和 <style></style> 内容的特殊逻辑——如果你的 HTML 里有内联脚本，且关心其中变量名是否变更，就得先抽出来单独比，不能依赖任何通用 diff 库直接吞进去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
