HTML解析引擎仅单次线性构建DOM树，不重新生成；所谓“重生成”实为JS操作或innerHTML触发的子树重建，唯一真正重生成是已废弃的document.write()。
HTML解析引擎不“重新生成”结构，它只构建一次DOM树
浏览器的HTML解析引擎（如WebKit的HTMLParser、Blink的HTMLDocumentParser）在页面加载时**单次线性解析**HTML文本，按字节流顺序构建DOM树。它不会“重新生成”结构——所谓“重生成”，实际是开发者手动触发的DOM操作（如innerHTML赋值、document.createElement插入），或框架调用render()函数后批量更新节点。解析引擎本身无状态、不回溯、不重放。
常见误解：看到Vue/React刷新视图就以为HTML引擎在重跑。其实只是JS层操作已有DOM树，或用innerHTML触发浏览器内部的**子树重建流程**（即丢弃旧子节点，重新解析字符串并构建新子树）。
- 直接改
innerHTML会清空原有子节点，再把新字符串交给HTML解析器走一遍词法→语法→DOM构建流程，但仅限该元素内部 -
document.write()在页面加载完成后调用会触发整个文档重置（等价于document.open()+document.close()），这是唯一真正“重生成”的方式，但已废弃且危险 - 服务端返回HTML片段时，若未包裹在
<template>中而直接insertAdjacentHTML，可能因标签未闭合被浏览器自动修正（如把<tr><td>1</td>补全为<tr><td>1</td></tr>），这不是引擎“重生成”，而是容错修复
想安全替换局部结构？必须用<template> + cloneNode(true)
动态注入HTML片段最易出错的环节，就是绕过解析引擎的容错机制，直接拼接字符串或滥用innerHTML。正确路径是让浏览器先用<template>完成一次干净的解析，再克隆可操作副本：
-
<template>的内容在解析阶段被跳过执行（脚本不运行、图片不加载、样式不应用），但标签结构被完整解析为DocumentFragment - 必须调用
template.content.cloneNode(true)——直接appendChild(template.content)会把内容“搬走”，第二次调用返回空片段，且控制台静默失败 - 克隆后才能安全
querySelector、绑定事件、修改data-属性；原始template.content上查不到任何子元素 - 表格场景下，动态行必须塞进
<tbody>，且<tbody>需显式存在（不能靠浏览器自动创建），否则克隆后的<tr>可能被错误挂到<table>根下
服务端返回的HTML字符串，必须经template.innerHTML中转
别信“后端吐HTML前端直接插”的说法。未经处理的HTML字符串可能含顶层<html>、未闭合标签、或<script>残留，直接innerHTML = htmlStr会导致DOM结构污染甚至解析中断。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：
const tmp = document.createElement('template'); tmp.innerHTML = htmlStr;—— 浏览器会自动修正标签嵌套、补全缺失结束标签、剥离顶层<html>和<body> - 取
tmp.content.cloneNode(true)后，才是结构完整、属性正确、可安全插入的节点树 - 若需批量插入多个节点，先塞进
DocumentFragment再一次性appendChild，避免反复触发layout - 注意：
tmp.innerHTML赋值会触发一次微型解析流程，但开销远低于整页重载，且完全可控
SSR页面里混用客户端模板，hydration边界必须手动接管
服务端已输出HTML（如Next.js、Nuxt的SSR），又用<template>补充内容时，ID重复、表单焦点丢失、data-state不同步等问题不会自动修复。
- 克隆后若存在重复
id="modal-close"，后续document.getElementById只取第一个，交互必然失效 - 服务端渲染的
<input value="abc">，客户端JS修改input.value不会改变value属性，需同步设置el.setAttribute('value', 'new')或用el.value = 'new'; el.defaultValue = 'new' - 表单控件（
<select>、<textarea>）的初始值由value属性决定，而非JS属性；hydration时需显式比对并重置 - 最容易被忽略的是：服务端没渲染的区域（如懒加载模块），其
<template>里的<script>仍被忽略——动态行为必须在克隆后手动addEventListener
