真正要做的，是区分“源码格式空白”和“渲染无关冗余空白”，只清理后者；pre、textarea、script、style 中的空白必须保留，因其影响语义或语法，html-minifier 默认跳过这些标签内容。
直接删掉所有换行和制表符会破坏 pre、textarea 和代码块的语义，也会影响团队协作时的代码可读性。真正要做的，是区分“源码格式空白”和“渲染无关冗余空白”，只清理后者。
哪些空白必须保留？pre、textarea、script 里的内容不能动
浏览器对这些标签内的空白有明确语义要求：pre 会原样渲染换行和空格；textarea 的初始值依赖原始缩进；script 和 style 中的换行可能影响语法（比如模板字符串或 CSS 注释）。任何自动化清理工具若无条件删除这些区域的空白，会导致功能异常。
- html-minifier 默认跳过
pre、textarea、script、style内容，除非显式关闭ignoreCustomFragments - 正则替换如
re.sub(r'>\s+（Python）会误伤 <code>script标签内部的>\n 结构，引发 JS 语法错误 - 手动编辑时，建议用编辑器的“语法感知折叠”功能，只对非特殊上下文区域执行格式化
怎么安全清理普通标签间的换行与制表符？用 html-minifier 的 collapseWhitespace
这个选项不是暴力删空格，而是模拟浏览器解析逻辑：把块级元素之间的连续空白（换行+缩进）压缩为单个空格或完全移除，同时保留内联文本中的单词间距。
- 启用时，
<div>\n <p>Hello</p>\n</div>会被压缩为<div><p>Hello</p></div>，但<p>Hello World</p>仍变成<p>Hello World</p> - 若页面含大量
inline-block元素，需配合conservativeCollapse: false，否则标签间换行仍会渲染为可见空隙 - 注意它不处理属性值内的空白，例如
class=" header main "不会被简化——得靠额外正则或 PostHTML 插件
DOM 层面动态清理文本节点？别用 .text()，要用 textContent + 正则
jQuery 的 .text() 会合并所有子文本节点并丢弃结构，无法控制清洗粒度；而原生 textContent 可逐节点操作，保留 DOM 树完整性。
立即学习“前端免费学习笔记（深入）”；
- 关键判断条件是
/\S/.test(text)：只处理含非空白字符的文本节点，跳过纯换行缩进生成的空文本节点 - 推荐正则：
text.trim().replace(/\s+/g, ' ')——\s涵盖空格、制表符、各种换行符，比/ +/g更鲁棒 - 必须遍历
childNodes（而非children），因为文本节点 nodeType === 3，children只返回元素节点，会漏掉换行文本
编辑器里怎么快速统一缩进风格？别依赖“删除空白行”按钮
多数编辑器的“Trim Trailing Whitespace”只删行尾空格，对缩进层级和模块间空行无效。真正提升可读性的是结构化空白管理。
- 设置统一缩进为 2 或 4 空格（非 Tab），并在保存时自动转换 Tab → 空格
- 在
<header>、<main>、<footer>之间插入 2 行空行；组件内部如表单字段间用 1 行空行分隔 - 禁用“自动删除空行”插件，改用 Prettier 配置
htmlWhitespaceSensitivity: "strict"，它能识别语义区块并保留必要空行
最易被忽略的一点：服务端返回的 HTML 若带 CMS 生成的深度嵌套缩进，前端用 element.normalize() 只能合并相邻文本节点、移除空节点，但不会压缩文本内连续空白——那部分还得靠 textContent.replace(/\s+/g, ' ').trim() 单独处理。
