直接删掉没用的比任何css或js优化都管用，因dom层级超4层会显著增加解析耗时、css选择器匹配成本指数上升、低端设备layout耗时抬升，并引发重排扩散与可访问性问题。
直接删掉没用的 <div> 比调任何 CSS 或 JS 优化都管用——这不是建议，是性能底线。
<h3>为什么 DOM 层级深到 4 层以上就该警惕</h3>
<p>浏览器解析 HTML 是深度优先遍历，每多一层嵌套，不仅解析耗时增加，CSS 选择器匹配成本也指数上升。比如 <code>.a .b .c .d p 这类四层选择器，浏览器要逐层回溯父节点，实际开销远超线性增长。单个 <section></section> 下子元素超过 50 个，滚动时重排（reflow）就会肉眼卡顿。
- DOM 树深度 > 4 层时，低端设备 layout 耗时开始明显抬升
- 语义错位的嵌套（如用
<ul></ul>包表单项）既加重解析负担，又破坏可访问性 - SSR 模板自动生成的空 wrapper（如
<div class="wrapper"></div>）几乎 100% 无功能，纯占位
哪些标签最容易悄悄堆出冗余层级
真正拖慢渲染的不是语义化标签本身，而是开发中无意识的“结构惯性”：
<div> 套 <code><div> 套 <code><div>：只为给按钮加 margin 或居中，其实用 <code>margin、flex或grid就能解决- 用
<ul></ul>渲染非列表内容（如表单项组），多出<ul></ul>+ 每个<li>的开闭标签 - 为图标单独包一层
<div>：<code><label><svg><input></svg></label>完全能替代三层嵌套 -
v-html或innerHTML插入未精简的 HTML 片段：服务端返回带空格、注释、冗余标签的内容，直接放大节点数 - 用
::before/::after生成分隔线、角标、小图标，避免额外<div class="divider"> <li>间距优先用 <code>display: grid或flex的gap属性，而不是塞一个<div style="height: 16px"></div> - 外边框用
outline+outline-offset模拟，比套一层<div> 更轻量 <li>带图标的输入框，用 <code><label><svg><input></svg></label>，别写三层嵌套<div><div><input></div></div>
- 运行
document.querySelectorAll('*').length 快速统计总节点数；SPA 页面建议控制在 2000 以内，首屏关键区域 ≤ 500 - Chrome DevTools → Elements 面板右键节点 →
Break on subtree modifications，观察动态插入是否失控 - 在 CI 中加入 Puppeteer 脚本，加载页面后断言
document.querySelectorAll('div, span, section').length不超阈值 - Vue/React 开发中禁用无意义的
<template></template>或<fragment></fragment>包裹（除非必要逻辑分组），避免编译后产生冗余<div> <p>真正难的不是删掉几个 <code><div>，而是团队对“这个 wrapper 真的必要吗”的持续质疑习惯——一旦容忍一个无功能的节点，后面就容易批量复制。</div>
用 CSS 替代 DOM 节点的实操方式
很多视觉效果根本不需要真实元素，CSS 完全能接管：
怎么快速发现和收敛冗余节点
靠肉眼很难识别隐藏膨胀，得靠工具和量化约束：
