DOM树深度超6层或节点总数超2000即卡顿；空壳div（无class/id/data-*、无样式绑定、无事件监听）应优先删除，因其徒增解析负担与重排代价。

直接看 DOM 树深度和节点总数，别靠肉眼数嵌套——document.querySelectorAll('*').length 超过 2000 或任意节点 node.depth > 6，就是卡顿的明确信号。

怎么一眼揪出“纯摆设”div

这类 <div> 不参与样式、不绑定事件、不承载语义，只负责把结构越写越深。它们不会报错，但会让浏览器多建节点、多匹配选择器、多走一遍回溯闭合逻辑。 <ul><li>在 Chrome DevTools → Elements 面板右键任一 <code><div> → “Show DOM properties”，查 <code>node.depth：超过 6 就该动手删

在 Console 运行 document.querySelectorAll('div:not([class]):not([id]):not([data-*])').length，结果大于 0 就说明存在空壳 <div> <li>CSS 面板里搜索 <code>div[class]，逐个点开规则，没对应样式、也没 JS 用 querySelector 或 getElementById 访问的，整行 HTML 删掉

特别盯住 CMS 或低代码导出内容里的 <div data-id="xxx">，只要没 <code>addEventListener 绑定，一律清

为什么删 div 比加优化更有效

DOM 节点每增 100 个，解析耗时平均增加 20–40ms；5 层以上嵌套在低端安卓机上会让 FCP 延迟 20–50ms。这不是“看着臃肿”，而是浏览器真正在单线程里多干了活。

• 嵌套过深会强制浏览器创建更多合成层（Layers 面板可见一堆零碎小方块），放大重排代价
• div div div .btn 这类选择器匹配成本非线性增长，浏览器要逐层向上找父节点
• 一个按钮被套 5 层 <div class="container"><div class="wrapper">...</div></div>，而实际只需 <button class="btn"></button> —— 多出来的 4 层全是解析负担
• 用 <header></header> 替 <div class="header"> 不只是语义升级，浏览器对语义标签有原生解析路径优化，比 <code>div[role="banner"] 少一次 ARIA 推导

  删之前必须验证的三件事

  盲目替换语义标签或删除包裹层，可能引发样式断裂、JS 报错或可访问性警告。操作前先确认：

  

  使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

  使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

  下载

  立即学习“前端免费学习笔记（深入）”；

  • 当前 <div class="main-header"> 是否被 JS 用 <code>document.querySelector('.main-header') 显式访问？如果是，保留 class，只改标签：<header class="main-header"></header>
  • <section></section> 内是否直接子级含 <h2></h2>？如果不是（比如中间隔了个 <div>），删掉那层再挪 <code><h2></h2> 上来，否则大纲算法失效，屏幕阅读器会跳序
  • 是否存在 display: none 的 <div> 用于后续 JS 动态显示？这类不该删，改为初始不渲染，用 <code>insertAdjacentHTML 按需插入

    最易被忽略的是：DOM 结构优化不是“删得越多越好”，而是“删掉浏览器不得不多做的那部分”。一个错位的 <main></main> 比十个冗余 <div> 更伤性能——它会触发整个文档结构树重建。</div>