innerhtml 更新会丢失事件监听器，应改用 replacechildren() 或事件委托；template 内容需克隆使用；html 模板不参与增量更新，依赖 js/css 资源 hash；htmldiff.js 仅适用于只读预览。
直接用 innerHTML 更新模板内容会丢事件监听器
你写 container.innerHTML = newHtml，浏览器确实立刻渲染，但所有已绑定在子元素上的事件监听器（比如 save-btn 的 click）全没了——因为整个子树被销毁重建。这不是 bug，是规范行为。
常见错误现象：document.getElementById('save-btn').addEventListener('click', fn) 绑完，再执行一次 innerHTML，点击就失效；或者表格里每行都有删除按钮，刷新后全部失灵。
- 若必须用
innerHTML，确保事件委托到父容器：给container监听click，再用e.target.matches('.delete-btn')判断来源 - 若需保留原生事件绑定，优先改用
replaceChildren()：它接受节点或字符串，不销毁父节点，也不触发重解析 -
replaceChildren()不支持 IE，但 Chrome 86+、Firefox 78+、Safari 14.1+ 全都可用；旧环境可封装 fallback：container.replaceChildren ? container.replaceChildren(nodes) : container.innerHTML = htmlStr
<template></template> 插入表格时必须克隆 content，否则第二次就空了
<template></template> 的 content 是只读的 DocumentFragment，直接 appendChild(template.content) 会“搬空”它，第二次调用就啥也没有——控制台还不报错，极难排查。
正确做法必须用 template.content.cloneNode(true) 或 document.importNode(template.content, true) 获取可复用副本。
- 插入目标必须是
tbody，不是整个table；否则浏览器自动补<tbody> 导致结构错乱 <li>克隆后要处理重复 <code>id（比如modal-close），否则document.getElementById只取第一个 -
<template></template>里的<script></script>和<style></style>默认不执行、不生效，别指望它自动加载逻辑或样式 - 若 HTML 本身也需“增量”，得靠服务端动态注入版本号或 ETag 校验，前端构建工具不处理这个
-
html-webpack-plugin 配合
html-webpack-template可注入构建时间、环境变量等元信息，但这些不触发浏览器重新下载 HTML - 不要手动在 HTML 模板里写
<script>__VERSION__</script>然后替换——容易污染模板结构，且破坏 gzip 压缩率 -
htmldiff.js输入必须是合法 HTML 字符串：来自textarea的内容得先用DOMParser解析再序列化，否则&或未闭合标签会被误解析 - 它不处理
<script></script>或<style></style>内部逻辑 diff，整块当文本 token - 输出是字符串，不是 DOM 节点：必须用
previewEl.innerHTML = result插入，且仅限只读区域
构建阶段的增量更新依赖文件 hash，不是 HTML 模板本身
HTML 模板文件（如 index.html）在构建中不参与增量更新逻辑——它只是个入口壳子。真正靠增量更新起效的是 JS/CSS 资源的 hash 指纹。
Webpack/Vite 等工具会在构建时生成带 hash 的资源名（如 main.a1b2c3.js），并自动更新 HTML 中对应的 <script src="main.a1b2c3.js"></script> 引用。用户缓存旧 HTML 后，只要资源 URL 变了，浏览器就会拉新资源。
htmldiff.js 只适合只读预览，不能喂给 contentEditable
想在编辑器里高亮改了哪几行？别把 htmldiff.js 输出的 <ins>/<del></del></ins> 字符串直接塞进 contentEditable 容器。浏览器一解析，格式全乱，光标错位，甚至破坏 iframe 预览区的样式隔离。
根本原因：contentEditable 没有虚拟节点树，没有 key 机制，也不做快照比对。所谓“差异”，全是 JS 库在背后把 HTML 字符串标准化（比如统一属性顺序、补全标签）后再比对的结果。
<template></template> 提供安全容器，replaceChildren() 提供更新契约，而真正的增量边界，始终在应用层状态与 DOM 生命周期的交界处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
