DOM节点超2000会因layout重排拖垮帧率，需结合离屏渲染与DOM减排：用document.createDocumentFragment批量插入、CSS替代冗余标签、OffscreenCanvas分层缓存，并通过DevTools定位嵌套膨胀源。
Canvas/WebGL 容器里混用 HTML overlay 时，DOM 节点超 2000 就会卡帧——不是 JS 慢，是 layout 阶段被反复重排拖垮的。离屏渲染能救，但必须和 DOM 减排配合用，单靠一方效果有限。
document.querySelectorAll('*').length 超 2000 怎么快速定位膨胀源
别猜，直接看真实渲染树：Chrome DevTools → Elements 面板，右键最外层容器 → Copy → Copy outerHTML，粘贴到编辑器里数标签对（<div>、<span>、<svg> 算，</div> 不算）。重点盯三类：
-
<div>套<div>套<div>：只为 margin 居中或 padding，实际用gap或margin就能解决 -
<ul><li>渲染非列表结构（比如表单项组），多出两层节点+闭合标签 - SSR 模板自动生成的空 wrapper：
<div class="wrapper"></div>，既无样式也无交互
用 CSS 替代 DOM 节点的硬核写法
很多视觉元素根本不需要真实节点，CSS 可以接管：
- 分隔线、角标、状态图标用
::before/::after生成，禁用<hr>和<div class="divider"> - 间距优先用
display: grid的gap或margin，不用空<div style="height: 8px"></div> - 外边框用
outline+outline-offset模拟，比套一层<div>更轻量 - 带图标的输入框写成
<label><svg></svg><input></label>，而非三层嵌套<div><div><input></div></div>
Canvas overlay 动态插入时怎么避免重排风暴
tooltip、坐标提示这类高频 overlay 插入，最容易触发 layout 飙升：
立即学习“前端免费学习笔记（深入）”；
- 永远用
document.createDocumentFragment()缓存所有新节点，最后单次appendChild()，禁止循环调用 - 插入前临时设父容器
style.display = 'none'，插入完成再恢复，彻底屏蔽中间态 layout - 若位置靠 JS 计算（如跟随鼠标），插入后立即读取
offsetWidth会强制同步 layout——改用getComputedStyle(el).width，或把计算逻辑移到requestAnimationFrame回调末尾 - 动态 overlay 必须批量插入且脱离文档流：用
position: fixed+z-index控制层级，避免影响主容器布局上下文
离屏渲染该用 OffscreenCanvas 还是普通 canvas 元素
关键看是否需要 Web Worker 卸载主线程压力：
- 纯前端静态 overlay（如 HUD、图例底图）：用普通
document.createElement('canvas')创建离屏 canvas，尺寸必须显式设置（offscreen.width = 1024），不能靠 CSS - 需在后台持续计算的动态图层（如粒子轨迹、实时连线路径）：用
OffscreenCanvas，通过transferControlToOffscreen()传给 Web Worker，主线程只负责drawImage() - 高 DPI 设备下，离屏 canvas 宽高必须乘以
window.devicePixelRatio，否则模糊或裁剪；主 canvas 也要同步适配 - 缓存粒度要细：不要整屏一张离屏 canvas，按逻辑拆成“背景层”“节点模板层”“连接线层”，只重绘变化的部分
真正难的不是写出离屏代码，而是每次加一个 <div> 时，都问一句：“这个 wrapper 真的必要吗？”——DOM 膨胀从来不是一次写错，而是容忍了十次无意义的包裹。
