直接用innerhtml替换会卡顿甚至丢光标，因为每次赋值都是全量重绘：浏览器需销毁旧dom树、重新解析html、重建节点、触发重排重绘并重绑事件，导致主线程锁死、输入延迟、光标停摆及表单状态（如input值、textarea光标）丢失。
为什么直接用innerHTML替换会卡顿甚至丢光标
因为每次 innerHTML = newHtml 都是全量重绘：浏览器要销毁旧节点树、重新解析 HTML 字符串、重建 DOM、触发重排重绘、重绑事件——对 500 行以上 HTML，这个过程常超 100ms，主线程被锁死，光标停摆、输入延迟、撤销失效。
更隐蔽的问题是：innerHTML 会抹掉所有已绑定的事件监听器和表单控件状态（比如 <input> 的当前值、<textarea></textarea> 的光标位置），这不是“更新”，是“重建”。
- 避免在编辑器预览区直接赋值
innerHTML，尤其当内容来自用户实时输入时 - 若必须用字符串渲染（如服务端返回 HTML），先用
document.createRange().createContextualFragment()转成文档片段，再用replaceChildren()或textContent = ''+appendChild()替换，保留部分引用稳定性 - 对含
<script></script>或<style></style>的 HTML，innerHTML会执行脚本、重载样式，造成不可控副作用；应提前剥离或禁用
用 DocumentFragment + 节点比对做轻量差量更新
不依赖虚拟 DOM 库，也能实现局部更新：核心是把新旧 HTML 分别转成 DOM 片段，逐层比对节点结构，只替换/插入/删除变化的部分。
关键不是“全量 diff”，而是“结构感知的最小粒度操作”。例如：
- 用
Array.from(newDOM.querySelectorAll('*'))和Array.from(curDOM.querySelectorAll('*'))获取扁平化节点数组，按索引比对isEqualNode() - 仅当
!newEl.isEqualNode(curEl)且newEl.textContent.trim()有实质变化时，才调用curEl.textContent = newEl.textContent - 新增节点用
curParent.insertBefore(newNode, refNode)，删除用curEl.remove()，避免反复查 DOM - 对属性变更（如
class、data-status），优先用curEl.className = newEl.className或curEl.dataset.status = newEl.dataset.status
注意：isEqualNode() 不比较子树顺序或文本细节，适合结构稳定、语义清晰的编辑器输出 HTML（如 Markdown 渲染结果），不适合含大量动态 ID 或随机 class 的框架产物。
diff-match-patch 在 Worker 中跑不起来的三个硬伤
把 diff_main 直接塞进 Web Worker 并不能自动变快——它会因三类错误静默失败或产出错乱结果。
-
document、localStorage、location等全局对象在 Worker 中不存在，任何隐式依赖都会报ReferenceError；确保你用的是纯函数版diff-match-patch（如dmp.diff_main(str1, str2)），不带任何 DOM 操作封装 - Worker 里没有
DOMParser，传入的 HTML 字符串若含未转义&、或换行不一致，<code>diff_main会把它们当作普通字符比对，导致高亮错位；清洗工作必须在主线程完成：用new DOMParser().parseFromString(html, 'text/html')再取body.innerHTML - 传参必须是纯 JSON 可序列化的对象：
{ text1: string, text2: string, id: number }；含RegExp、Date、函数或循环引用的参数会被postMessage静默截断，看起来“没返回”
实测中，未清洗的 HTML 输入会让 diff 结果偏移 3–5 行，而开发者常误以为是算法不准，其实是输入不合法。
htmldiff.js 输出的 / 怎么安全渲染到 contentEditable
htmldiff.js 返回的是含 <ins></ins>、<del></del> 标签的 HTML 字符串，不能直接 innerHTML = result 到 contentEditable 容器里——它会破坏编辑状态，且浏览器可能自动修正标签嵌套，让高亮失效。
- 先用
DOMParser解析result，再遍历所有<ins></ins>/<del></del>节点，用element.style.backgroundColor = '#d4edda'等内联样式替代标签，生成干净 DOM - 避免在
contentEditable区域内保留<ins></ins>这类语义标签，它们不是标准编辑容器支持的可编辑元素，会导致光标跳脱或粘连 - 若需保留原始差异语义（如导出为报告），另存一份纯净 HTML，预览区只渲染样式化后的结果
-
htmldiff.js对<script></script>和<style></style>是整块 token 处理，不会深入比对 JS 逻辑；若编辑器支持代码块内联编辑，这部分差异需单独走 AST 解析，不能依赖它
真正难的不是算出差异，而是让差异结果在编辑态下“可交互、不崩、不丢状态”——这要求你在 diff 输出后，仍用 DOM 方法做一次“人肉 patch”，而不是无脑注入 HTML 字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
