应视场景清理空标记：纯展示页可忽略，动态交互页建议清理；void element（如<img>）不可删，伪空标记（如无属性的<div></div>）需清理；模板中应条件包裹整个标签而非内容；构建后可用html-minifier-terser自动清理，运行时清理易导致水合失败。
服务端渲染（SSR）生成的 HTML 静态内容里，<div></div>、<span></span> 这类空标记本身不报错，但若大量存在，会拖慢 DOM 构建、增加内存占用，还可能干扰 CSS 选择器或 JS 遍历逻辑。是否该清理？答案是：视场景而定——纯展示页可忽略；含动态交互或需精准 DOM 操作的页面，建议清理。
哪些空标记必须保留
不是所有空元素都能删。HTML5 规范中定义的 void element（空元素）天生无闭合标签、也不允许有内容，如 <img>、<input>、<br>、<meta>。它们在源码中写成 <img src="x"> 或 <img src="x" /> 都合法，且浏览器解析结果一致。这类标签不能也不该被“清理”为删除或替换，否则会破坏语义甚至导致功能失效。
需要警惕的是人为构造的“伪空标记”：
-
<div></div>（无 class、id、style、data-* 等属性） -
<span></span>（父容器内仅用于占位，但未设 visibility 或 display） -
<div> </div>（内部只有空白字符，无实际文本）
这些才是 SSR 模板引擎（如 EJS、Nunjucks、Handlebars）在条件分支未命中时容易产出的冗余节点。
立即学习“前端免费学习笔记（深入）”；
服务端模板中如何预防空标记生成
与其事后清洗，不如在渲染源头控制。多数模板引擎支持条件判断语法，应避免用空标签兜底。
- EJS 中，不要写：
<div><% if (show) { %>content<% } %></div>→ 可能产出<div></div> - 应改写为：
<% if (show) { %><div>content</div><% } %> - Nunjucks 中，用
{% if %}包裹整个标签，而非只包内容 - Handlebars 中，慎用
{{#if}}{{/if}}套在已有标签内；优先用{{#if}}<div>...</div>{{/if}}
额外注意：某些 SSR 框架（如 Next.js 的 getStaticProps + getStaticPaths）会在 fallback 页面中注入占位 <div></div>，这类需在构建后检查并剔除，不能靠模板逻辑预防。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
构建后静态 HTML 的自动化清理方案
若已产出大量静态 HTML 文件（如 Jekyll、Hugo、或自建 SSR 打包流程），可用轻量 CLI 工具做 post-process 清洗。核心原则是：只删“无属性 + 无子节点 + 无有意义文本内容”的标签。
- 推荐工具：
html-minifier-terser（非html-minifier，后者已停更） - 关键配置项：
removeEmptyElements: true（默认 false），它会删掉<div></div>、<p></p>等，但保留<div id="app"></div>（因含属性） - 务必禁用
collapseWhitespace或谨慎使用 —— 它会影响<pre>、<textarea>内容，且可能误删<button> </button>中的空格（影响可访问性） - 对
<script>和<style>标签，应设置ignoreCustomFragments避免正则误伤
示例命令行：
html-minifier-terser --remove-empty-elements --minify-css --minify-js --collapse-inline-tag-whitespace=false --file-ext html -o dist/ src/*.html
JS 运行时动态清理的风险点
不建议在浏览器端用 JS 遍历并删空标签，尤其对 SSR 页面——这会导致水合（hydration）失败。React/Vue/Svelte 在 hydrate 阶段严格比对服务端生成的 DOM 结构，若 JS 删除了某个空 <div>，而服务端 HTML 里存在它，就会触发 mismatch warning，甚至降级为客户端重渲染。
唯一可行的运行时干预场景是：你明确知道某段区域完全由 JS 控制（如第三方 widget 容器），且服务端未参与其渲染。此时可用：
document.querySelectorAll('div:empty, span:empty').forEach(el => {
if (!el.hasAttributes()) el.remove();
});但注意：:empty 伪类不匹配含空白文本节点的元素（如 <div>\n </div>），要真正清空需结合 textContent.trim() === '' 判断。
最易被忽略的一点：空标记清理和 white-space 处理是两回事。删掉 <div></div> 不影响相邻文本的换行行为；而 <div>hello\nworld</div> 中的换行符仍会被折叠——别指望删空标签顺带解决布局间隙问题。
