大屏不能依赖浏览器默认 dom 生命周期，因connectedcallback不重复触发、disconnectedcallback不保证执行，需手动池化管理节点。
connectedCallback 不会在滚动中反复触发，disconnectedCallback 也不保证执行——大屏场景下指望浏览器自动回收 DOM 节点是错的，必须手动池化管理。
为什么大屏不能依赖浏览器默认 DOM 生命周期
大屏页面常含数百个实时刷新的卡片、图表或地图标记，DOM 节点频繁增删。但浏览器对这些节点没有“回收”概念：removeChild() 后节点即被销毁，绑定的事件、定时器、Canvas 上下文全丢；而 connectedCallback 只在首次挂载时调用，滚动中 appendChild() 已挂载过的节点不会再次触发它。
- 常见错误：监听
scroll或resize，一动就el.remove(); newEl = createElement(...); container.appendChild(newEl)—— 每帧都触发回流 + 事件重绑 + 内存抖动 - 真实限制：
disconnectedCallback在页面刷新、崩溃、后台标签页冻结时根本不会运行，无法作为清理唯一入口 - 性能代价：一个 200 节点的列表每秒滚动更新 10 次，等效每秒创建/销毁 2000 个节点，低端设备 layout 时间飙升 3–5 倍
用 Map + dataset 实现安全节点池化复用
核心思路是把节点当“可擦写的白板”，不销毁、只隐藏+复写内容。缓存用 Map 而非数组，避免索引漂移导致数据错位。
- 缓存时机：节点即将滚出视口时调用
recycleNode(el)，设el.style.display = 'none'（不 detach）并存入nodePool.set(el.dataset.id, el) - 复用逻辑：新数据来时先查
nodePool.get(id)，存在则el.style.display = ''，再批量更新textContent、dataset、src等可变字段 - 关键防护：所有节点必须带唯一
dataset.id，且初始化时就写死结构（如固定 class、子元素 class 名），禁止在复用时增删子节点 - 示例片段：
const nodePool = new Map();<br>function recycleNode(node) {<br> if (node.dataset.id && !nodePool.has(node.dataset.id)) {<br> node.style.display = 'none';<br> nodePool.set(node.dataset.id, node);<br> }<br>}<br>function acquireNode(id, data) {<br> let node = nodePool.get(id);<br> if (node) {<br> node.style.display = '';<br> node.querySelector('.value').textContent = data.value;<br> node.dataset.updated = Date.now();<br> nodePool.delete(id);<br> return node;<br> }<br> // fallback: 创建新节点<br>}
避免三类高频误操作
大屏开发中容易因“图省事”引入不可逆性能衰减，以下操作看似简单，实则埋雷。
- 用
innerHTML = htmlString替换整块内容：会清空子节点，所有事件监听器永久丢失，Canvas/WebGL 上下文被销毁，且强制同步 layout - 在滚动监听里反复调用
getBoundingClientRect()或offsetTop：每次读取都触发强制回流，100 个节点滚动时每帧卡顿 8–12ms - 把
requestAnimationFrame回调直接塞进connectedCallback：该回调仅首次执行，后续滚动复用节点时不会再生效，动画逻辑实际已失效 - 用
document.querySelectorAll('.card')批量操作：返回动态集合，遍历时节点可能已被回收或复用，极易读到 stale 数据
首屏与长列表的节点数硬约束
大屏不是普通网页，渲染压力集中在单帧。节点总数和结构深度直接影响 layout 阶段耗时，需主动收敛而非事后优化。
- 首屏关键区域（如主指标区、地图容器）DOM 节点数建议 ≤ 300；总节点数控制在 1500 以内（可用
document.querySelectorAll('*').length快速验证） - 禁用无意义 wrapper：
<div class="wrapper"><div class="content">...</div></div>至少多出 2 个节点，改用 CSSpadding/gap或::before实现视觉分隔 - 表格类组件慎用
<table>：每个 <code><td> 都是独立节点，10×20 表格即 200+ 节点；考虑用 <code>display: grid+ 单层<div> 替代 <li>自动化兜底：CI 流程中加入 Puppeteer 脚本，加载大屏页后断言 <code>document.querySelectorAll('div, span, section').length ，超限自动失败
真正难的不是写对 connectedCallback，而是每次加一个 <div> 时，都问一句：这个节点是否参与样式计算或事件响应？如果不是，它就不该存在。</div>
