直接 new Element() 在高频刷新中会卡死，因每次 createElement 都触发内存分配、DOM 构建、样式树挂载及 layout→paint 全流程，叠加 GC 压力导致渲染管线过载和掉帧。
为什么直接 new Element() 在高频刷新中会卡死
每次 document.createElement('div') 都会触发浏览器分配内存、构建 DOM 节点、挂载样式树，再走 layout → paint 流程。在每秒刷新 10+ 次的动态表格或实时日志流中，频繁创建/销毁节点会快速推高 GC 压力，主线程被阻塞，页面掉帧甚至假死。
这不是 JS 执行慢，是 DOM 生命周期开销叠加导致的渲染管线过载。尤其当节点带内联样式、dataset 或事件监听器时，销毁不干净还会引发内存泄漏。
- 避免在 render 循环里调用
createElement或innerHTML - 不要依赖
removeChild后就认为资源已释放——监听器、闭包引用可能还活着 - IE11 及部分旧版 Edge 中，
remove()不会自动清理绑定事件，必须显式removeEventListener
用 objectPoolFactory 实现轻量级 DOM 复用池
复用池本质是「预分配 + 懒回收」：提前创建一批节点存进数组，需要时 pop() 出来用，不用时 push() 回去，绕过反复构造/析构开销。
下面这个工厂函数已验证在 Chrome/Firefox/Safari（含 iOS 16+）稳定运行：
立即学习“前端免费学习笔记（深入）”；
const domPoolFactory = function(createFn) {
const pool = [];
return {
create: (args) => pool.length ? pool.pop() : createFn(args),
recover: (node) => {
// 清空内容与事件，但保留基础结构
node.textContent = '';
node.innerHTML = '';
node.dataset.index = '';
node.className = '';
pool.push(node);
}
};
};
// 创建一个 div 池，初始预热 5 个
const divPool = domPoolFactory(() => {
const div = document.createElement('div');
div.style.cssText = 'position: absolute; left: 0; top: 0; opacity: 0;';
return div;
});
// 预热：避免首次使用时延迟
for (let i = 0; i < 5; i++) divPool.recover(divPool.create());
-
recover()必须清空textContent和innerHTML，否则残留内容会在下次create()后意外显示 - 不要在
createFn里绑定事件——应在取出后按需绑定，回收前解绑 - 池大小不宜过大（建议 10–50），否则空闲节点长期驻留内存，反而拖慢 GC
配合虚拟滚动做行节点复用时的关键约束
在 react-window 或手写虚拟列表中，DOM 复用池不能只管“有没有节点”，还得保证“节点能映射到正确数据”。常见翻车点：
- 复用节点未重置
dataset.index或data-id，导致点击某行却读到上一轮的数据索引 - 用
transform: translateY()移动节点位置，但没同步更新style.top或dataset.rowIndex，滚动后点击错位 - 池中节点被插入到不同父容器（比如从
#list移到#sticky-header），丢失 CSSOM 上下文，样式失效
正确做法是：每次 create() 后立刻注入真实数据上下文：
const rowNode = rowPool.create(); rowNode.dataset.index = String(currentIndex); rowNode.dataset.id = data[currentIndex].id; rowNode.textContent = data[currentIndex].name; container.appendChild(rowNode);
回收时机比创建时机更难把控
很多人以为“渲染完就 recover”就行，但实际要分场景判断：
- 滚动中快速滑过某区域：节点刚创建就进入视口外，应立即
recover()，别等 scroll 结束 - 悬停 tooltip 或弹出菜单：即使脱离视口，只要用户可能再次呼出，就先保留在池中，加个
timeout延迟回收（如 3s 后无交互再回收） - 页面切换或组件卸载：必须手动调用
pool.length = 0清空数组，否则闭包引用 DOM 节点导致整个池无法被 GC
最易被忽略的是：复用池本身没有生命周期管理机制，它不会感知组件是否还存活。你在 React useEffect 或 Vue onUnmounted 里忘记清空池，几 MB 的 DOM 节点就永远挂在内存里了。
