template.content.cloneNode(true) 是唯一合法起点，必须通过 template.content 访问 DocumentFragment 并深克隆，才能获得可操作、可插入的 DOM 副本；直接读 innerHTML 或 textContent 无效，且需配合 IntersectionObserver 懒克隆、DocumentFragment 批量插入及安全填值（textContent/value）以提升性能与安全性。
template.content.cloneNode(true) 是唯一合法起点
不走这一步，后续所有操作都无效。很多人卡在用 document.querySelector('template').innerHTML 拿内容，结果返回空字符串——这是规范行为，不是 bug。template.innerHTML 永远为空；template.textContent 只返回带换行缩进的纯文本，无法操作节点结构。必须通过 template.content 访问内部的 DocumentFragment，再调用 cloneNode(true) 得到可操作、可插入的 DOM 副本。
常见错误包括：
- 缓存
template.content引用后反复克隆 → 第二次起就是空 fragment - 漏掉
true参数 → 浅克隆只复制<template>标签自身，内部结构全丢 - 对表单控件用
textContent填值 →<input>的 value、焦点、已绑定事件监听器全部丢失
滚动触发才克隆：IntersectionObserver + 占位节点
懒渲染的核心是“推迟克隆”，不是推迟插入。把 cloneNode(true) 放到元素进入视口时执行，能显著减少首屏 DOM 节点数和内存占用，尤其适合长列表、瀑布流等场景。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 每个待渲染区域预留一个占位
<div data-template-id="card" data-item-id="123"></div> - 用
IntersectionObserver监听这些占位节点，触发回调时才调用克隆 → 填值 → 插入 → 移除占位节点 - 避免在 observer 回调里直接
appendChild→ 先批量克隆填值，再统一插入 - 若模板含 Web Components（如
<my-card>），确保插入动作发生在所有初始化逻辑之后，否则connectedCallback不触发
批量插入必须用 DocumentFragment
循环中每轮都 container.appendChild(cloned)，等于让浏览器反复重排重绘。100 条数据就可能明显卡顿，500 条基本卡死。
正确做法是：
- 先
const frag = document.createDocumentFragment() - 循环内：克隆 → 填值 →
frag.appendChild(cloned) - 循环结束后，只调一次
container.appendChild(frag)
DocumentFragment 是轻量中间容器，不在 DOM 树中，不能被 querySelector 查到，但能极大降低 layout 和 paint 开销。
填值别碰 innerHTML，优先用 textContent/value
用 innerHTML 填值等于主动引入 XSS 风险，还会销毁已绑定的事件监听器和节点引用。模板里有按钮？克隆后 onclick 就没了。
安全填值方式：
- 纯文本内容：
el.querySelector('.title').textContent = data.title - 表单控件：
el.querySelector('input').value = data.value（不是textContent） - 需渲染 HTML 片段？先对用户输入做转义：
text.replace(/&/g, '&').replace(/, '<')，再塞进innerHTML - 模板含
<script>？克隆后不会自动执行，需手动创建新 script 节点并 append 到目标容器
最容易被忽略的是：克隆后的节点若含动态资源（如 <img src> 或 <iframe src>），它们会在插入 DOM 后立刻加载——除非你提前干预，比如插入前加 loading="lazy" 或把 src 换成 data-src。
