HTML中不存在“空标签”概念，真正应删除的是无语义且无实际用途的包裹层，如框架生成的冗余div、BEM嵌套、clearfix等，而非幻想删掉空div就能减少DOM节点。
HTML里没有“空标签”这个东西，所谓“空标签”是误称；真正能帮你精简结构的，是正确识别并移除无语义的包裹层，而不是幻想删掉某个“空”的<div></div>就能减少节点数。
别信“空标签”能减少DOM节点
很多人以为<div></div>或<span></span>是“空”的、可以安全删——其实它们全是真实DOM节点，参与样式计算、布局测量、事件捕获，哪怕里面只有换行符或空格。浏览器不会因为标签“看起来空”就跳过它。
-
<div class="wrapper"></div>和<div class="wrapper">\n</div>都创建完整节点；后者因含换行符，甚至不匹配:empty -
:empty只匹配**完全无子节点**（不含文本、空格、注释）的元素，且仅在初始渲染时生效，JS清空后不会重触发 - 用
display: none或visibility: hidden只是隐藏，节点仍在DOM树中，仍被querySelectorAll捕获
真正该删的是无意义 wrapper
优化文档流的关键不是找“空”，而是揪出那些既没语义、也没被JS操作、更没CSS依赖的父容器。这类节点常见于框架输出或历史模板残留。
- Vue/React 组件未启用
<Fragment>时默认包裹的<div> - BEM 命名强绑定导致的嵌套：
<div class="card__body"><div class="card__body-inner">...</div></div> - 为兼容老CSS加的
<div class="clearfix"></div>或<div id="dynamic-section"></div>（但JS从未往里注入内容） - 检查方法：在 DevTools 的 Elements 面板右键目标节点 → “Break on subtree modifications”，再交互操作——没触发就大概率可删
用 display: contents绕过盒模型（谨慎）
对纯容器型 wrapper，display: contents能让该节点从渲染树中消失，子元素直接受父级 flex/grid 控制。但它不删除 DOM 节点，也不保留可访问性信息，所以不能乱用。
立即学习“前端免费学习笔记（深入）”；
- 支持环境：Chrome 56+、Safari 15.4+、Firefox 63+；Edge 79+；IE 完全不支持
- 副作用：屏幕阅读器会跳过该节点及其所有子节点（除非显式加
aria-*属性） - 不能用于需要伪元素（
::before/::after）或继承font等属性的场景 - 示例：
<div class="grid-item-wrapper"><img><h3>标题</h3></div>+.grid-item-wrapper { display: contents; }→ 子元素直接成为 grid item
压缩空白和省略冗余标签比删“空标签”更有效
HTML体积大，主因是空白字符叠加和冗余语法，不是标签本身。现代构建工具（如html-minifier-terser）配合合理配置，收益远超手动删“空”标签。
- 必须开启
collapseWhitespace: true，否则换行缩进照旧 -
<html>、<head>、<body>可完全省略——浏览器自动补全，DOM 中始终存在 -
<meta charset="utf-8">无需/，<input disabled>比<input disabled="">更简洁 - 慎用
removeEmptyAttributes：会删掉class=""或data-id=""，可能破坏 JS 查询逻辑
真正难的不是删什么，而是判断某个<div>到底有没有被 CSS 或 JS 暗中依赖——它可能表面空，实则撑开高度、触发 BFC、或作为事件委托代理节点。动手前，先查 DevTools 的 Computed 样式和 Event Listeners 面板。
