当你需要动态生成重复的 HTML 结构时，通常有两种选择：要么用字符串拼接（容易引发 XSS 安全漏洞），要么隐藏一个现有 DOM 节点再克隆（隐藏内容依然会加载图片和脚本）。HTML5 引入的 <template> 元素完美解决了这些问题——它提供了一种“蓝图”机制，内部内容在页面加载时完全不渲染、不执行、不请求资源，只有在需要时才通过 JavaScript 激活。
本文将带你系统掌握 <template> 的核心概念、工作原理、最佳实践，并通过多个实战代码示例，展示如何用它构建高性能、可维护的原生前端应用。
一、什么是 <template> 元素？
<template> 是 HTML5 标准中的语义化标签，用于定义 可复用的 HTML 结构块。浏览器在解析页面时，会读取 <template> 内部的 HTML，但 不会渲染它们，也不会执行内部 <script>、加载 <img> 或 <video> 等资源。它就像一份“待激活的设计图”，等待 JavaScript 在合适的时机克隆并插入真实 DOM。
<template id="card-tpl"> <div class="card"> <img class="avatar" src="" alt=""> <h3 class="name"></h3> </div></template>
与传统的隐藏元素对比
过去，有人会用 <div style="display:none"> 来存放模板，但这种做法有明显的缺点：
内部的 <img> 依然会发起网络请求，浪费带宽。
内部的 <script> 代码仍会执行，可能导致副作用。
表单控件可能参与页面提交（虽然不可见，但依然存在于 DOM 中）。
而 <template> 则实现了 真正的惰性：
二、核心特性与独特行为
特性 | 说明 |
不可见 | <template> 元素及其所有后代在页面上完全不渲染，即使放在 <body> 中 |
任意内容 | 可以包含任何有效的 HTML 内容，包括 <style>、<script>、<svg><canvas>，甚至嵌套的 <template> |
惰性资源 | 内部的 <img> 不会发请求，<video> 不会预加载，<audio> 不会播放，<iframe> 不会加载 |
脚本不执行 | <script> 中的代码在克隆并插入 DOM 之前完全不会运行 |
运行时独立 | 通过 JS 克隆出的副本是全新的，修改副本不会影响原始模板 |
三、工作原理：从模板到真实 DOM
每个 <template> 元素都有一个只读属性 .content，它返回一个 DocumentFragment（文档片段）。这个片段包含了模板内部的所有子节点，但它独立于主 DOM 树之外。
const tpl = document.getElementById('my-template');const fragment = tpl.content;
要实际使用模板，通常需要 克隆 这个片段，然后填充数据并插入到文档中：
const clone = tpl.content.cloneNode(true); clone.querySelector('.name').textContent = '流云风';document.body.appendChild(clone);
注意：.cloneNode(true) 与旧式的 document.importNode(tpl.content, true) 效果相同，现代开发中更推荐使用 cloneNode。
四、典型应用场景
场景 | 说明 |
动态列表 / 表格 | 根据数据循环克隆模板，避免字符串拼接带来的 XSS 风险 |
模态框 / 弹窗 | 将弹窗结构写在 <template> 中，点击按钮时克隆、填充内容并显示 |
表单动态添加字段 | 用户点击“添加”按钮时，克隆一组新输入框（如多选项、联系方式等） |
Web Components | 结合自定义元素和 Shadow DOM，实现样式与逻辑完全封装的组件 |
服务端渲染（SSR）的客户端激活 | 服务端返回静态骨架，客户端用 <template>接管动态部分，减少重复代码 |
知识扩展
Shadow DOM是Web组件技术栈的核心部分，它提供了一种将DOM树与主文档DOM隔离的方法，实现了真正的组件封装。
核心概念
Shadow Host：挂载Shadow DOM的常规DOM元素。
Shadow Root：Shadow DOM的根节点。
Shadow Tree：Shadow DOM内部的DOM树结构。
Slots：允许外部内容插入到Shadow DOM中的占位符。
主要特性
样式隔离：Shadow DOM内的CSS不会影响外部文档，外部样式也不会渗透到Shadow DOM内部。
DOM封装：外部JavaScript无法直接访问Shadow DOM内部的元素。
组件化：实现了真正的组件封装，组件内部细节对外不可见。
五、深入实战：代码示例
示例1：高性能用户列表渲染（批量操作）
使用 DocumentFragment 批量克隆模板，一次性插入 DOM，避免多次重排重绘。
<h2>👥团队成员</h2><div id="container"></div><template id="userTemplate"> <div class="user-card"> <h3 class="user-name"></h3> <p class="user-email"></p> </div></template>
const users = [ { name: '烈阳', email: 'lieyang@example.com' }, { name: '追风', email: 'zhuifeng@example.com' }, { name: '贪狼', email: 'greewolf@example.com' }];
const template = document.getElementById('userTemplate');const container = document.getElementById('container');const fragment = document.createDocumentFragment();
for (const user of users) { const clone = template.content.cloneNode(true); clone.querySelector('.user-name').textContent = user.name; clone.querySelector('.user-email').textContent = user.email; fragment.appendChild(clone); }
container.appendChild(fragment);
示例2：动态表单 —— 添加多个联系人字段
这个例子演示了如何利用模板动态添加表单输入组，并配合事件委托处理删除操作。
<h2>📞 紧急联系人</h2><div id="contacts-container"> </div><button class="add-btn" id="addContactBtn">+ 添加联系人</button><template id="contactTemplate"> <div class="contact-group"> <input type="text" placeholder="姓名" class="contact-name"> <input type="tel" placeholder="手机号" class="contact-phone"> <button class="remove-btn" type="button">删除</button> </div></template>
const container = document.getElementById('contacts-container');const template = document.getElementById('contactTemplate');function addContact() { const clone = template.content.cloneNode(true); container.appendChild(clone);}container.addEventListener('click', (e) => { if (e.target.classList.contains('remove-btn')) { const group = e.target.closest('.contact-group'); if (group) group.remove(); }});addContact();addContact();document.getElementById('addContactBtn').addEventListener('click', addContact);
六、性能优化与最佳实践
推荐做法
缓存模板引用
不要在循环中反复调用 getElementById。在初始化时获取模板元素并保存在变量中。
批量操作使用 DocumentFragment
如 示例 1 所示，先组装片段再统一插入，可以极大减少 DOM 重排次数。
搭配 Shadow DOM 隔离样式
如果模板中的样式不希望影响全局，请使用 Shadow DOM 包裹。否则，建议采用 BEM 命名规范防止冲突。
始终基于原始模板克隆
不要动态修改模板内部内容（例如直接修改 template.content 中的文本），否则会影响后续所有克隆。
使用 data-* 属性传递数据
在模板中预留 data- 属性占位符，克隆后根据业务逻辑填充。
注意事件监听
如果动态添加大量克隆节点，建议使用事件委托（如示例 2），将监听器挂载在父容器上。
常见误区
误区 | 正确理解 |
认为 <template> 内的图片不会加载 | 克隆并插入 DOM 后，图片会立即加载，请确保此时图片 URL 有效且符合预期 |
试图用 CSS 选择器直接操作模板内元素 | 模板未激活时不在 DOM 树中，必须先克隆再查询 |
在模板中放入 id 属性 | 多次克隆会导致重复 id，推荐使用 class 或 data-* |
认为模板中的 <script> 会自动执行 | 只有克隆后的节点插入 DOM 后才会执行，且执行上下文为全局，容易造成变量污染，最好将逻辑写在外部脚本中 |
克隆后忘记深拷贝 | cloneNode(false) 只复制外层容器，内部子节点会丢失，必须使用 true |
七、浏览器兼容性与降级方案
截至 2026.04.09
对于需要兼容 IE 的项目，可以使用以下特性检测和降级方案：
if (!('content' in document.createElement('template'))) { console.warn('当前浏览器不支持 template 元素，使用 innerHTML 替代'); }
如果项目必须支持 IE，通常建议使用构建工具将模板预处理成 JavaScript 字符串模板（如 lodash.template）或使用 Vue/React 等框架来规避兼容性问题。
八、与主流框架的对比
方案 | 特点 |
原生 <template> | 轻量、无依赖、真正惰性，适合简单场景或 Web Components 基础 |
Vue 单文件组件的 <template> | 编译时转换为渲染函数，支持响应式数据绑定，但运行时没有原生惰性特性 |
React JSX | 本质是 JavaScript 表达式，最终生成 React.createElement 调用，与原生模板不同 |
Angular 模板 | 扩展了 HTML，拥有丰富的语法，在编译时被处理 |
理解原生 <template> 有助于你更深刻地把握这些框架的模板原理。
总结
<template> 元素是 HTML5 提供的一个优雅、高性能、高安全性的客户端模板机制。它解决了传统动态渲染中的三大痛点：
安全性：避免字符串拼接 HTML 导致的 XSS 攻击风险。
性能：惰性加载机制减少不必要的资源请求，配合 DocumentFragment 可极致优化 DOM 操作。
语义与可维护性：声明式结构让代码意图更清晰，与 Web Components 结合可构建原生、可复用、样式隔离的组件系统。
无论是开发简单的动态列表、表单增强，还是构建复杂的自定义组件库，<template> 都值得成为你工具箱中的常备武器。掌握它，不仅能让你写出更纯粹、更高效的原生代码，也为理解现代前端框架（如 Vue 的编译时模板、React 的 JSX 理念）打下坚实的基础。
阅读原文：原文链接
该文章在 2026/4/23 16:19:50 编辑过
400 186 1886
