必须先格式化HTML再diff，否则90%为格式噪音；推荐prettier Web版清洗，用diff-match-patch生成unified diff，再由diff2html渲染，并通过DOMParser标准化提升语义对比精度。
用 diff2html 在浏览器里直接比对两个 HTML 文件
前端上传两个 HTML 文件后，不能直接拿原始字符串 diff —— 标签缩进、换行、空格、属性顺序稍有不同，整行就标红，90% 是噪音。必须先格式化再生成 unified diff，最后交给 diff2html 渲染。
关键三步：读取文件 → 格式化（标准化）→ 生成 diff 文本 → 渲染视图
- 用
FileReader读取两个Blob，得到字符串内容 - 调用轻量清洗函数（比如正则替换制表符、多余空格），或更稳妥地用
prettierWeb 版本（需引入prettier/standalone和prettier/parser-html）做格式化 - 用 JS 实现简易 unified diff（不依赖 shell）：推荐
diff库（如fast-diff或diff-match-patch），传入两段 cleaned HTML 字符串，输出符合diff -u格式的文本 - 把 diff 文本传给
Diff2Html.html(diffText, { drawFileList: false, matching: 'lines' })，插入页面即可看到并排高亮视图
diff2html 默认不识别 HTML 标签内部变化，怎么让 class、style 差异也高亮？
默认行为只按“行”比对，<div class="a"> 变成 <div class="b"> 整行标为修改，但 class="a" 和 class="b" 不会单独着色。这不是 bug，是设计使然 —— diff2html 不解析 HTML 结构。
真要细粒度高亮，得先做 DOM 层面的语义比对：
立即学习“前端免费学习笔记（深入）”；
- 用
DOMParser解析两个 HTML 字符串为Document对象 - 序列化时统一处理：比如用
new XMLSerializer().serializeToString(doc)+ 预处理（移除注释、标准化属性顺序、折叠空白文本节点） - 再把两个标准化后的字符串送入 diff 流程；这样
class值不同才会体现在独立 token 上，diff 结果更贴近语义 - 若仍需标签内属性级高亮，就得放弃
diff2html，改用htmldiff类库（如html-differ），它基于树比对，能定位到具体属性变更
上传大 HTML 文件时卡顿或内存爆掉，怎么优化？
直接读取几 MB 的 HTML 文件并全量 diff，浏览器很容易卡死。不是算法不行，是策略错了。
- 限制上传体积：前端用
file.size > 2 * 1024 * 1024拦截，提示“建议小于 2MB” - 跳过
<script>和<style>内容：用正则或DOMParser提前剥离，只比对结构和文本节点，大幅提升速度且更聚焦业务差异 - 分块对比（不推荐）：HTML 不是纯文本，强行按字节切分会破坏标签结构；可行的是提取关键区域（如
id="content"内部）再比，用querySelector定位后序列化 - 避免在主线程跑重任务：格式化和 diff 过程用
Web Worker，防止 UI 冻结
为什么用 git diff 或命令行 diff 在前端走不通？
因为浏览器没权限执行系统命令，也没 diff 二进制。有人试图用 Emscripten 编译 diffutils 到 wasm，结果体积超 1MB，启动慢、兼容差，得不偿失。
真正可用的路径只有两条：
- 纯 JS 实现的 diff 逻辑（如
diff-match-patch），轻量、可控、无依赖 - 服务端代理：前端上传文件到 API，由后端跑
tidy + diff -u，返回 diff 文本，前端只负责渲染 —— 适合企业内网或对精度要求极高的场景
最常被忽略的一点：你根本不需要比出“所有差异”，而是要回答“用户想确认什么变了”。是结构变动？文案修改？还是 class 被删了？明确目标，才能选对工具和清洗粒度。
