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/templateMDN DocumentFragment 文档：https://developer.mozilla.org/docs/Web/API/DocumentFragment