直接 innerHTML += 拼接模板会触发多次重排、丢失事件监听器、执行内联脚本引发 XSS，且无法控制插入时机；正确做法是用 template.content 获取 DocumentFragment，通过 importNode 克隆后操作 textContent/value 填值，最后批量 appendChild 到容器。
为什么直接 innerHTML += 拼接模板会出问题
异步渲染时用 el.innerHTML += htmlString 看似简单，实际会触发多次重排、丢失事件监听、且无法控制插入时机。浏览器每执行一次 innerHTML 赋值，就强制解析整段 HTML、重建子树、丢弃原有绑定的事件处理器——哪怕只是追加一个 <li>。
常见错误现象：点击事件突然失效、滚动位置跳变、列表项闪烁、CPU 占用飙升。
- 不要在循环里反复赋值
innerHTML，哪怕只拼一个字符串 - 避免用正则或字符串替换做 XSS 过滤，
DOMPurify.sanitize()才是安全底线 - 内联脚本（如
<script>alert(1)</script>）会被执行，必须过滤
template 标签 + importNode 是最轻量的客户端模板方案
<template> 不参与渲染、不触发网络请求、不执行脚本，纯声明式占位。它适合存放可复用的结构片段，比如表格行、卡片、模态框内容。
关键操作不是“取 innerHTML”，而是用 template.content 获取 DocumentFragment：
立即学习“前端免费学习笔记（深入）”；
const tmpl = document.getElementById('user-item');
const frag = document.importNode(tmpl.content, true);
const nameEl = frag.querySelector('.name');
nameEl.textContent = user.name; // 自动转义
container.appendChild(frag);
-
importNode(..., true)必须设为true，否则只克隆空壳 - 修改
frag中节点比操作真实 DOM 快，且不触发 layout - 多个
<template>可按需加载，配合fetch('/templates/user.html')动态注入
Fragment 必须在数据就绪后立即组装，不能延迟
异步拿到数据后，document.createDocumentFragment() 这一步不能拖到事件回调末尾，更不能等所有逻辑走完再建。Fragment 的价值在于把 N 次 DOM 插入压成 1 次，前提是所有节点创建和属性设置都发生在 fragment 上。
典型误区：
- ❌ 先 push 到数组：
nodes.push(li)，再遍历container.appendChild(li)—— 每次仍是独立插入 - ❌ 在
then里先读container.offsetHeight再建 fragment —— 浏览器提前 flush layout，fragment 失效 - ✅ 正确顺序：fetch → 解析数据 →
const frag = document.createDocumentFragment()→ 循环中frag.appendChild(node)→ 最后container.appendChild(frag)
服务端模板（如 3x-ui）和客户端异步渲染如何衔接
像 web/html/component/aClientTable.html 这类服务端模板，本质是静态结构快照。它不处理状态、不响应事件、也不感知数据变化。真正动态的部分（如分页加载、搜索过滤）必须由客户端接管。
衔接要点：
- 服务端吐出的 HTML 应含明确的容器锚点，如
<div id="table-container"></div>，而非直接渲染完整表格 - 客户端 fetch 新数据后，清空容器再用 fragment 渲染，避免残留 DOM 干扰
- 若模板含初始化脚本（如
initDataTable()），必须确保它只执行一次，且在 fragment 插入后调用
最易被忽略的是：服务端模板里的 class 名、data 属性、slot 名，必须和客户端 JS 严格一致；差一个连字符或大小写，querySelector 就返回 null，后续所有逻辑静默失败。
