document.adoptnode 是合并 dom 节点最稳妥方式，可保持节点完整性、表单状态与事件绑定；需配合 domparser 解析、head 去重、bom 清理及 doctype 处理。
用 document.adoptNode 合并 DOM 节点最稳妥
直接拼接 HTML 字符串容易破坏结构、丢失事件、忽略 <script></script> 执行时机，而 document.adoptNode 能把另一个文档的节点“合法转移”过来，保持节点完整性。适用于需要保留表单状态、已绑定事件或动态生成内容的场景。
常见错误是直接用 innerHTML 拼接，导致 <input> 值丢失、addEventListener 失效、<canvas></canvas> 绘图清空。
- 必须先用
DOMParser解析第二个 HTML 字符串为独立文档，不能直接用document.createElement('div').innerHTML = htmlStr - 只对
body或head子节点调用adoptNode，不要对整个document调用 - 如果目标文档含
<script></script>，需手动执行（script.cloneNode(true)+eval(script.textContent)），原生不自动运行
合并时 head 内容要手动去重
两个 HTML 的 通常有重复的 <meta>、<link rel="stylesheet"> 或 <title></title>，盲目追加会导致样式覆盖异常、字符编码冲突、SEO 元信息错乱。
典型现象：合并后页面字体变小、中文乱码、Favicon 不显示——八成是 <meta charset="UTF-8"> 或 <base> 被重复插入。
立即学习“前端免费学习笔记（深入）”；
MixItUp是一种重量轻但功能强大的 jQuery插件，提供美丽的动画过滤和分类 排序内容。它起着很好的与现有的HTML和CSS，使其成为一个伟大的选择流体，响应布局。这是完美的组合，画廊，博客，或任何分类或排序内容！
- 遍历源
head节点，用querySelector检查目标head是否已存在同类型标签（如head.querySelector('link[rel="stylesheet"][href="a.css"]')） -
<title></title>只保留第一个，后续忽略；<meta name="viewport">也只取首个 - 动态插入的
<style></style>标签建议加data-merged="true"属性，方便下次合并识别
用 Node.js 读文件合并时注意编码和 BOM
本地合成两个 HTML 文件时，若用 fs.readFileSync 直接拼字符串，Windows 下的 UTF-8 BOM（\uFEFF）可能被当作文本开头，导致浏览器解析失败或空白行。
错误现象：Unexpected token （误当 JSON 解析）、页面顶部多出空白、CSS 不生效。
- 统一用
fs.readFileSync(path, 'utf8')，避免Buffer转换引入隐式编码问题 - 用
html.replace(/^\uFEFF/, '')清除 BOM，尤其处理 Windows 生成的文件 - 若第二个文件含
DOCTYPE，必须删掉——HTML 只允许一个!DOCTYPE，否则触发怪异模式
内联 script 和 style 的执行顺序不能靠位置保证
合并后，原属不同 HTML 的 <script></script> 和 <style></style> 会按插入顺序排列，但浏览器仍按加载阶段解析：外部脚本阻塞、内联脚本立即执行、defer 脚本等 DOM 解析完才跑——这跟它们原来在哪个文件里无关。
最容易被忽略的是：合并前能正常工作的 document.write 或依赖 window.onload 的代码，在合并后可能因 DOM 已就绪而失效。
- 把所有内联
<script></script>移到前，并加type="module"或包装成DOMContentLoaded回调 -
<style></style>标签尽量外链，避免合并后 CSS 优先级混乱；必须内联时，加data-origin="file-a"方便调试 - 不要依赖
document.currentScript判断当前执行上下文——合并后它指向的是最终文件里的节点，不是原始文件
