Template 是一个惰性内容仓库，即未激活的 HTML 片段，其内容被解析为脱离主 DOM 的 DocumentFragment，不渲染、不执行脚本、不加载资源，仅在调用 cloneNode(true) 时克隆插入。
Template 元素本身不参与渲染，它只是个“模板容器”，浏览器会解析其内容但不会将其加入 DOM 树，也不会执行其中的脚本或加载资源。正因如此，它能避免重复创建、挂载、卸载节点带来的开销，让动态渲染更轻量、更可控。
Template 是什么：一个惰性内容仓库
<template> 标签定义一段**未激活的 HTML 片段**。它的内容在页面加载时被解析为 DOM 节点，但这些节点被存放在一个“文档片段（DocumentFragment）”中，完全脱离主 DOM —— 不渲染、不布局、不触发样式计算、不执行 script、不加载 img/video 等资源。
你可以把它理解成一个“待命的零件箱”，只在你明确调用 content.cloneNode(true) 时才真正复制出可用的节点。
如何使用 Template：三步走
基本用法非常直接：
- 写模板：在 HTML 中声明 <template id="item-tpl">...</template>，里面放任意合法 HTML（包括嵌套、属性、slot）
-
取内容：用
document.getElementById('item-tpl').content获取只读的 DocumentFragment -
克隆并插入：调用
fragment.cloneNode(true)得到一份全新、可操作的节点副本，再用append()或appendChild()插入目标容器
例如渲染列表项时，每次新增都从 template 克隆，而不是拼接字符串或反复调用 createElement + setAttribute + appendChild，既安全又高效。
为什么比 innerHTML 或 createElement 更高效？
对比常见方式：
- innerHTML += ...：每次追加都会触发整个容器的重新解析、重排、重绘，性能随数据量增长而急剧下降
- createElement 链式创建：代码冗长，且每个节点创建、属性设置、文本节点插入都是独立 DOM 操作，浏览器可能多次触发样式/布局计算
- <template>：一次性解析好结构，克隆是轻量级内存复制；插入的是完整子树，浏览器只需一次布局和绘制更新
尤其在频繁增删、滚动加载、动画列表等场景下，template + cloneNode 的组合显著减少强制同步布局（forced reflow）次数。
配合现代 API 效果更好
Template 不是孤立使用的：
- 与
DocumentFragment天然契合：template.content 就是 Fragment，可批量 append 后一次性插入，减少回流 - 支持
<slot>和 Shadow DOM：适合封装可复用的 Web Component 模板 - 可预编译：服务端或构建时注入数据生成 template 内容，客户端只做克隆，进一步降低运行时负担
注意：template 内部的 script 不会自动执行，如需动态行为，克隆后手动调用 eval（不推荐）或绑定事件、初始化逻辑更安全。
