HTML Template 与 DocumentFragment：高效 DOM 构建

概述

`<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