标签是唯一能真正惰性解析、不执行脚本、不加载资源的原生模板容器；必须用content.clonenode(true)克隆复用，因content为只读documentfragment，直接插入仅一次有效。
模板标签必须用 <template></template>，不能用 <div> 或 <code><span></span> 伪装
浏览器只在遇到原生 <template></template> 标签时才真正跳过渲染、不执行内部脚本、不加载图片或 iframe。用 <div hidden> 或 <code><span style="display:none"></span> 模拟，会导致 DOM 提前解析、资源误加载、事件监听器意外绑定。
常见错误现象：模板里有个 <img src="avatar.jpg">，结果页面一打开就发请求，哪怕它根本没被 content.cloneNode(true) 插入；或者里面绑了 onclick，却在页面加载时就触发了。
- 始终用
<template id="item-tpl">...</template>，id 用于 JS 快速定位 - 内部不要写内联样式（如
style="color:red"），CSS 应由外部 class 控制，避免重复计算 - 禁止在
<template></template>内使用<script></script>—— 它不会执行，但会干扰 HTML 解析器，某些旧版 Safari 会报错
document.importNode() 和 content.cloneNode(true) 到底该选哪个？
两者都能提取模板内容，但行为差异直接影响内存和性能：
-
content.cloneNode(true)是最常用、也最安全的选择：它返回一个纯文档片段副本，不带原始节点引用，修改它不影响模板本身 -
document.importNode(template.content, true)主要用于跨 document 场景（比如 iframe 间共享模板），普通单页应用中没必要，且 IE 不支持 - 如果模板含
<input>或<textarea></textarea>，cloneNode(true)不会复制当前用户输入值（这是正确行为），若需保留值，得手动同步
模板中绑定数据，为什么不用字符串拼接而要用 innerHTML = template.content.innerHTML？
直接赋值 innerHTML 看似简单，但会破坏事件委托、丢失已绑定的监听器、触发重排重绘，且无法复用节点。真正规范的做法是操作 DocumentFragment：
- 用
const frag = document.importNode(template.content, true)或template.content.cloneNode(true) - 再用
frag.querySelector('.title').textContent = data.title精准更新，而不是整段替换 - 最后
container.appendChild(frag)—— 这样只触发一次 DOM 插入，比多次innerHTML更快，也避免 XSS 风险（只要不用innerHTML拼接不可信数据） - 如果用框架（如 Vue/React），它们底层也是基于类似 Fragment 的机制，手写时别绕开这个原则
服务端返回的 HTML 片段能当模板用吗？
不能直接当 <template></template> 用。服务端返回的字符串是文本，不是 DOM 节点，必须先解析才能获得 content 属性。
- 错误做法：
template.innerHTML = serverHtml—— 此时template.content仍是空 DocumentFragment - 正确做法：用
DOMParser解析：const doc = new DOMParser().parseFromString(serverHtml, 'text/html')，再取doc.body.firstElementChild或包装成<template></template>后提取 - 更稳妥的方式：服务端统一返回结构化 JSON，前端用模板生成 DOM，避免 HTML 字符串解析带来的不确定性（比如编码、自闭合标签处理）
最容易被忽略的是：模板内容一旦插入页面，就脱离了 <template></template> 的“惰性”保护——后续所有操作都按普通 DOM 处理，记得清理事件、释放引用，否则容易内存泄漏。
