HTML Template 与 DocumentFragment：高效 DOM 构建

---

title: HTML Template 与 DocumentFragment：高效 DOM 构建

keywords:

• <template>
• DocumentFragment
• 克隆与插入
• 批量渲染
• 性能

description: 介绍 <template> 与 DocumentFragment 的用法，离屏构建与批量插入 DOM，减少重排与重绘，适用于列表与组件渲染。

categories:

• 文章资讯
• 技术教程

---

概述

<template> 提供可克隆的离屏内容；DocumentFragment 作为轻量容器用于批量插入，避免多次重排。两者结合实现高效渲染。

示例

<template id="item">
  <li class="item"><span class="title"></span></li>
</template>
<ul id="list"></ul>
<script>
const tpl = document.getElementById('item')
const frag = document.createDocumentFragment()
for (const t of ['A','B','C']) {
  const node = tpl.content.cloneNode(true)
  node.querySelector('.title').textContent = t
  frag.append(node)
}
document.getElementById('list').append(frag)
</script>

工程建议

• 批量操作：尽量在 Fragment 中构建并一次性插入；减少布局抖动。
• 组件化：配合自定义元素与 Shadow DOM；提高可维护性与封装。
• 兼容：在旧环境回退到字符串模板与 innerHTML；防止 XSS。

参考与验证

• MDN <template> 文档：https://developer.mozilla.org/docs/Web/HTML/Element/template
• MDN DocumentFragment 文档：https://developer.mozilla.org/docs/Web/API/DocumentFragment