DocumentFragment不能替代节点池化，因其仅优化插入性能且插入后清空，不管理节点生命周期；节点复用必须用Map缓存dataset.id对应的节点，配合template克隆和display:none回收。
文档碎片本身不提供节点池化能力，它只解决“批量插入时重排次数”的问题；真正要复用节点、避免创建销毁开销，必须配合 Map + dataset.id 手动管理节点生命周期。
为什么 DocumentFragment 不能替代节点池化
DocumentFragment 是离线容器，插入后自动清空，所有子节点被“迁移”走——它不保留节点引用，也不感知节点是否已被挂载或回收。哪怕你把 100 个 li 塞进 fragment 再 append 到 ul，这些节点一旦上树，后续滚动移出视口时仍会被 removeChild() 销毁，无法复用。
- fragment 解决的是“插入阶段”的性能问题，不是“存活阶段”的内存管理问题
- 大屏或长列表中每帧增删数百节点，瓶颈不在插入快慢，而在 JS 创建 + GC 回收 + 事件重绑的叠加抖动
- 浏览器不会因 fragment 存在就延迟或跳过
disconnectedCallback—— 它本就不保证执行
节点池化必须用 Map 而非数组缓存
用 Array 存节点，靠下标索引取用，极易因数据顺序变化（如排序、过滤、分页）导致节点与数据错位：第 3 个节点被复用到第 7 条数据上，textContent 覆盖了，但 dataset.id 还是旧的，后续回收逻辑全乱。
- 每个节点初始化时必须写死唯一
dataset.id，例如el.dataset.id = 'card-123' - 缓存用
Map：键为dataset.id，值为节点本身，查取O(1)，无索引漂移风险 - 回收时只设
el.style.display = 'none'，不调removeChild()，节点保留在 DOM 树中但不可见 - 复用时先
nodePool.get(id)，存在则恢复显示 + 更新内容 +nodePool.delete(id)
template + cloneNode(true) + fragment 的组合链路
池化不是只缓存“已渲染节点”，而是缓存“可填值模板实例”。真实高性能列表必须三者协同：模板定义结构、克隆生成实例、fragment 批量插入、Map 管理生命周期。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 首次渲染：从
<template>克隆 → 填值 →frag.appendChild()→container.appendChild(frag) - 滚动复用：查
nodePool.get(id)→ 存在则el.style.display = ''+el.querySelector('.title').textContent = data.title - 滚出视口：调
recycleNode(el)，仅设display: none并nodePool.set(el.dataset.id, el) - 禁止在复用时调
innerHTML或增删子元素——结构必须初始化时就固定，只更新可变字段
容易被忽略的 DOM 结构陷阱
表格、列表嵌套、flex 容器里直接往 fragment 塞 tr 或 li 看似没问题，但浏览器会静默修正结构，导致 fragment 中节点顺序与预期不符，甚至触发额外 layout。
- 向
<table>插入行，必须先 append 到tbody，不能直接塞 fragment 后 append 到 table - 使用
display: contents的父容器中，fragment 子节点可能被扁平化，丢失层级语义 - 若节点含
canvas或video，复用时需手动ctx.clearRect()或video.load()，否则残留画面或状态 - 池化节点的事件监听必须用事件委托绑定在容器上，而非每个节点单独
addEventListener
池化策略真正的复杂点不在代码长度，而在于所有节点必须“结构固化、ID 唯一、复用只改内容”，任何一次动态增删子节点或覆盖 innerHTML，都会让整个池失效，退化成高频创建销毁模式。
