必须查真实渲染树：打开Chrome DevTools→Elements面板，右键节点→“Show DOM properties”，重点看depth（≥7须重构）和childElementCount（单section＞50为风险），配合选择器:not(html):not(body):not(header):not(nav):not(main):not(section):not(article):not(footer)>div高亮冗余div，再通过Computed查看display值确认是否无样式作用。
过度包装元素不是“代码不够漂亮”的问题，而是直接拖慢 DOM 构建、抬高内存占用、触发重排风暴的硬性瓶颈。删掉一个无用的 <div>，效果远超压缩几 KB JS。
怎么快速揪出纯包裹型 <div>
别靠肉眼扫源码——SSR、框架注入或浏览器自动修正后，实际 DOM 和你写的 HTML 常不一致。必须查真实渲染树：
- 打开 Chrome DevTools → Elements 面板，右键任意节点 → “Show DOM properties”，重点看
depth和childElementCount -
depth > 6或单个<section>下childElementCount > 50，基本就是结构性风险点 - 临时调试可用：
document.querySelectorAll('div:not([class]):not([id]):not([style]):not([onclick])')，它能抓出绝大多数“只用来套一层”的空<div>（上线前务必删掉） - 警惕 CMS/低代码平台生成的结构，比如
<div class="wrapper"><div class="container"><div class="row"><div class="col">…</div></div></div></div>，通常只需保留最内层
哪些视觉效果根本不需要额外 DOM 节点
很多“看起来得套一层”的场景，CSS 完全能零开销实现：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 分隔线、角标、小图标：用
::before/::after伪元素生成，避免<div class="divider"> - 间距控制：优先用
display: grid或flex的gap属性，而不是塞<div style="height: 16px"></div> - 外边框模拟：用
outline+outline-offset，比套一层<div>更轻量 - 带图标的输入框：用
<label><svg><input></label>直接组合，别写三层嵌套<div><div><input></div></div>
动态插入大量节点时如何避免重排风暴
循环调用 appendChild() 插入 100 行表格？等于主动触发 100 次 layout 计算。关键不是“怎么插”，而是“怎么批量插”：
立即学习“前端免费学习笔记（深入）”；
- 用
document.createDocumentFragment()缓存所有新节点，最后只调一次appendChild() - 若数据来自服务端 HTML 字符串，优先用
insertAdjacentHTML('beforeend', htmlStr)（不销毁已有事件监听器），但务必先过DOMPurify.sanitize() - 插入前临时设父容器
style.display = 'none'，插入完成再恢复，彻底屏蔽中间态重排 - 滚动加载场景下，直接上虚拟滚动（virtual scrolling），保持 DOM 节点数恒定在 50–100 个以内
真正难的不是识别冗余 <div>，而是在 CMS 输出、框架挂载、服务端模板混杂的场景里，确认某个节点到底是“服务端吐出来的”，还是“浏览器自己补的”，或是“React/Vue 注入的 wrapper”。这三类来源的优化手段完全不同，混在一起查就永远找不到根因。
