Template 是一个惰性内容仓库，即未激活的 HTML 片段，其内容被解析为脱离主 DOM 的 DocumentFragment，不渲染、不执行脚本、不加载资源，仅在调用 cloneNode(true) 时克隆插入。

Template 元素本身不参与渲染，它只是个“模板容器”，浏览器会解析其内容但不会将其加入 DOM 树，也不会执行其中的脚本或加载资源。正因如此，它能避免重复创建、挂载、卸载节点带来的开销，让动态渲染更轻量、更可控。

Template 是什么：一个惰性内容仓库

你可以把它理解成一个“待命的零件箱”，只在你明确调用 content.cloneNode(true) 时才真正复制出可用的节点。

如何使用 Template：三步走

基本用法非常直接：

• 写模板：在 HTML 中声明 ，里面放任意合法 HTML（包括嵌套、属性、slot）
• 取内容：用 document.getElementById('item-tpl').content 获取只读的 DocumentFragment
• 克隆并插入：调用 fragment.cloneNode(true) 得到一份全新、可操作的节点副本，再用 append() 或 appendChild() 插入目标容器

例如渲染列表项时，每次新增都从 template 克隆，而不是拼接字符串或反复调用 createElement + setAttribute + appendChild，既安全又高效。

为什么比 innerHTML 或 createElement 更高效？

对比常见方式：

• innerHTML += ...：每次追加都会触发整个容器的重新解析、重排、重绘，性能随数据量增长而急剧下降
• createElement 链式创建：代码冗长，且每个节点创建、属性设置、文本节点插入都是独立 DOM 操作，浏览器可能多次触发样式/布局计算
• ：一次性解析好结构，克隆是轻量级内存复制；插入的是完整子树，浏览器只需一次布局和绘制更新

尤其在频繁增删、滚动加载、动画列表等场景下，template + cloneNode 的组合显著减少强制同步布局（forced reflow）次数。

配合现代 API 效果更好

Template 不是孤立使用的：

• 与 DocumentFragment 天然契合：template.content 就是 Fragment，可批量 append 后一次性插入，减少回流
• 支持 和 Shadow DOM：适合封装可复用的 Web Component 模板
• 可预编译：服务端或构建时注入数据生成 template 内容，客户端只做克隆，进一步降低运行时负担

注意：template 内部的 script 不会自动执行，如需动态行为，克隆后手动调用 eval（不推荐）或绑定事件、初始化逻辑更安全。