HTML中不存在“Empty标签”概念，只有void元素（如br、img）和普通元素（如div、span）；后者即使为空也会创建真实DOM节点，真正应删除的是无语义的包裹层。
HTML 里根本没有“Empty 标签”这个概念
这是个常见误解。HTML 规范中没有“Empty 标签”这一分类，只有 void elements（空元素）和 normal elements（普通元素）。br、img、input、meta 等属于 void 元素，它们不能有子节点、不写闭合标签也合法；而像 div、span、p 这类必须成对或自闭合（如 <p/> 不合法），哪怕内容为空，它仍是完整 DOM 节点。
想靠“空标签”减少节点数？行不通——<div></div> 和 <span></span> 都会创建真实节点，参与构建、样式计算、布局测量，哪怕里面什么都没有。
真正能删的，是那些没语义也没用途的 wrapper
优化文档流的关键不是找“空”，而是识别并移除“无意义的包裹层”。这类节点常见于：
- Vue/React 框架默认生成的
<div>包裹（尤其未启用 Fragment 的组件） - BEM 命名强绑定导致的嵌套
<div class="block__element"><div class="block__element-inner">.../div> - 为兼容老 CSS 强加的
<div class="clearfix">或<div class="wrapper"> - 模板引擎残留的占位
<div id="dynamic-section"></div>，但 JS 实际从未往里注入内容
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器 DevTools 的 Elements 面板，逐层展开看真实 DOM 结构，不是源码层级
- 对疑似冗余的父节点，右键 → “Break on subtree modifications”，再交互看是否真被 JS 操作 —— 没触发就大概率可删
- 优先用
<section>、<article>、<header>等语义化标签替代无 class 的<div>，它们本身不增加额外开销，还能让浏览器跳过部分继承链计算 - 在支持的环境（Safari 15.4+、Chrome 56+）中，对纯容器型 wrapper 使用
display: contents，它会让该节点从渲染树中消失，子元素直接受父 flex/grid 控制 —— 注意：它不移除 DOM 节点，只是绕过盒模型，且会剥离可访问性节点
别误用 :empty 试图“隐藏空节点”
:empty 伪类只匹配完全无子节点（不含文本、空格、注释）的元素，且仅在初始样式计算阶段生效，无法响应 JS 后续操作。更关键的是：:empty 不删除节点，也不减少 DOM 数量，只是控制显示与否。
常见错误现象：
-
<div class="card">\n </div>因换行缩进含空白符，:empty完全不匹配 - JS 动态清空内容后，
:empty不会重新触发，节点仍存在、仍参与布局 - 用
display: none隐藏后，节点还在 DOM 树里，仍占用内存、仍可能被querySelectorAll捕获
如果目标是彻底移除节点占位，唯一可靠方式是：JS 中调用 el.remove() 或服务端不输出该 HTML 片段。
节点数精简的硬指标和易忽略点
测试数据显示，5 层以上嵌套在低端设备上可带来 20–50ms 首屏延迟；HarmonyOS ArkUI 中，1000 层 Row 嵌套会使 Measure/Layout 时间激增数倍。这些不是理论值，是真实渲染流水线中的耗时瓶颈。
容易被忽略的点：
-
document.createDocumentFragment()批量插入节点时，Fragment 本身也是节点，但它不参与渲染树，不会触发重排 —— 这是“减节点”的间接手段，不是删 DOM，而是避渲染 - 某些 UI 库（如 Ant Design、Element Plus）默认给组件加 data 属性 wrapper（如
<div data-v-xxx>），这些节点不可见但真实存在，需通过构建配置或自定义渲染函数剥离 -
contain: layout paint不能减少节点数，但它能截断重排传播链 —— 外部布局变化不会波及该容器内部，相当于把“节点多”的危害圈起来，不让它扩散
真正要动刀的地方，永远是 HTML 源头：删掉没用的 <div>，别指望靠 CSS 或 JS 把它们“变透明”或“假装不存在”。
