删注释和空标签能提速，因浏览器流式解析HTML，注释和空白字符仍需逐字处理；但空标签如挂载点、CSS/JS依赖节点不可盲目删除，须验证其运行时作用。
为什么删注释和空标签真能提速
不是“看起来更干净”，而是浏览器解析 HTML 是流式逐字符进行的。每遇到一个 <!-- 就要启动注释状态机，跨行时还要缓存上下文；每个空 <div></div> 或仅含空白的 <span> </span> 都会生成真实 DOM 节点，占用内存并触发样式计算——哪怕它最终 display: none。Lighthouse 报 “Avoid an excessive DOM size” 时，常有 30% 节点来自这类冗余结构。
怎么安全识别并删除无用注释
不能靠肉眼扫，也不能用 sed 's/<!--.*-->//g' 这种单行正则：它会漏掉跨行注释，还可能误吞 <!--[if IE]> 条件注释（虽已过时，但某些 CMS 仍残留）。必须用支持跨行非贪婪匹配的方案：
- 构建工具中推荐
html-minifier-terser，配置{ removeComments: true, collapseWhitespace: true } - 命令行临时处理用
perl -0777 -i -pe 's/<!--[\s\S]*?-->//g' index.html - VS Code 中搜索替换可启用“正则模式”，填入
<!--[\s\S]*?-->，勾选“跨行”选项 - 切记：先
git commit再批量删，避免误删调试用的<!-- DEBUG: auth flow step 2 --> -
<div id="modal-root"></div>：React/Vue 挂载点，删了 JS 报getElementById(...) is null -
<span class="counter"></span>：CSS 用::before插入内容，或 JS 用.textContent =填充 -
<div data-placeholder="sidebar"></div>：服务端渲染占位，删后首屏布局跳变 -
<meta name="generator" content="WordPress 6.8">：纯冗余，构建脚本里加一行sed -i '/name="generator"/d' index.html - 重复的
<link rel="stylesheet" href="main.css">：CMS 常因模板嵌套重复引入，用document.querySelectorAll('link[href]')在控制台查重复 -
<script type="text/javascript"></script>中的type属性：HTML5 已默认，删掉能省几个字节，积少成多 - 标签后紧贴的空白，如
<div>\n <p> → 压缩后应为 <code><div> <p>，否则残留的空格仍算文本节点</p> <p>最易被忽略的是：压缩只解决体积，不解决结构。一个删掉注释但保留 8 层 <code><div> 嵌套的 HTML，仍比结构扁平但带少量注释的版本慢得多。</div>
哪些空标签算“真无用”，删前必须验证
空标签不等于可删标签。以下情况看似空，实则被运行时逻辑依赖：
验证方法：在 DevTools Elements 面板右键该节点 → Break on → Attribute modifications，刷新页面，看是否被 JS 修改；再全局搜索其 id、class、data- 属性名，确认未出现在 querySelector 或 CSS 属性选择器中。
立即学习“前端免费学习笔记（深入）”；
压缩后还要检查什么
工具删完不代表万事大吉。常见漏网之鱼比注释更伤性能：
