直接砍掉冗余DOM节点比任何JS优化更立竿见影，尤其Canvas/WebGL混用HTML overlay时，document.querySelectorAll('*').length超2000会因layout重排明显拖慢帧率，实测1200节点图例可使帧时间从8ms升至22ms。
Canvas/WebGL 容器里混用 HTML overlay 时，document.querySelectorAll('*').length 超过 2000 就会明显拖慢帧率——不是 JS 卡，是 layout 阶段被浏览器反复重排拖垮的。
为什么图形容器里的 DOM 特别怕多节点
Canvas/WebGL 本身不依赖 DOM，但一旦加了 HTML overlay（比如 tooltip、图例、HUD 按钮），每个节点都得参与样式树构建、继承链回溯和布局上下文创建。哪怕 display: none，只要在 DOM 树里，就逃不开 CSSOM 计算。
- 深度超过 3 层时，
getBoundingClientRect()和offsetTop调用耗时非线性增长 - 一个 1200 节点的浮动图例面板，实测能把 WebGPU 渲染循环帧时间从 8ms 拉到 22ms（Chrome DevTools → Rendering → FPS Meter）
- 浏览器对
<svg></svg>或<canvas></canvas>内部元素不做 layout，但对 overlay 的每个<div> 都要算 <h3>CSS 替代 DOM 节点的硬核写法</h3> <p>能不用真实元素，就绝不用。以下写法已在高刷图表项目中线上验证：</p> <ul> <li>用 <code>::before/::after生成图标、角标、分隔线，替代<div class="divider"></div> - 间距优先用
gap（display: grid或flex），禁用空<div style="height: 8px"></div> - 边框/分隔线用
border-bottom或outline + outline-offset，不用<hr>或嵌套容器 - 带图标的输入框写成
<label><svg></svg><input></label>，而非三层div嵌套
动态 overlay 插入时怎么避免重排风暴
高频更新 tooltip、坐标提示等 overlay，最容易触发 layout 风暴：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 永远用
document.createDocumentFragment()缓存所有新节点，最后单次appendChild() - 插入前临时设父容器
style.display = 'none'，插入完成再恢复，彻底屏蔽中间态 layout - 若位置靠 JS 计算（如跟随鼠标），插入后立即读取
offsetWidth会强制同步 layout——改用getComputedStyle(el).width，或把计算逻辑移到requestAnimationFrame回调末尾
怎么确认你真减了节点而不是自我安慰
别信删了几行代码，要看真实渲染树：
- Chrome DevTools → Elements 面板，右键最外层容器 → Copy → Copy outerHTML，粘贴到编辑器里数标签对（注意闭合标签不算独立节点）
- 运行
console.log(document.querySelectorAll('*').length)，SPA 首屏建议 ≤ 500，整页控制在 2000 以内 - CI 中加入 Puppeteer 断言：例如
document.querySelectorAll('div, span, section').length
最难的不是删掉某个 div，而是每次写新组件时都问一句：“这个 wrapper 真的必要吗？”——一旦放过一个，后面就容易批量复制。
