html解析阶段即合并空白，dom中已无原始空格换行；pre标签靠white-space: pre渲染时保留格式，但无法恢复解析时丢失的空白；white-space仅影响渲染，不改变dom结构。
HTML解析时空白字符怎么被合并的
浏览器在构建DOM树的解析阶段，就把所有连续空白字符（ 、\t、\n、\r）统一压缩成单个空格——不是渲染时才处理，DOM里根本没存原始换行或多个空格。
常见错误现象：document.querySelector('p').textContent 返回 "Hello World"，哪怕源码写的是 <p>Hello\n\n\nWorld</p>；class=" foo bar " 解析后变成 class="foo bar"。
- 这个动作不可逆：CSS 的
white-space只能影响渲染，不能“找回”已被删掉的空白 - 属性值和文本节点一视同仁，都走同一套压缩逻辑
-
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、<script></script>、<style></style>内部不参与此压缩，因为它们有语义要求
为什么不能靠CSS恢复原始缩进和换行
white-space: pre 看起来“保留了格式”，其实只是让浏览器在绘制时按已有字符排版，但它面对的已经是压缩过的 DOM 文本节点——如果 JS 动态插入的字符串里没 \n，<pre class="brush:php;toolbar:false;"></pre> 也显示不出换行。
关键参数差异：
-
normal：默认，合并空白 + 忽略换行 + 允许自动换行 -
pre：保留所有空白和\n，但禁止自动换行（容易溢出容器） -
pre-wrap：保留空白和\n，同时允许自动换行（日常展示日志、代码最常用） -
pre-line：合并空格，但把换行符转成换行效果（类似段落间断）
注意：white-space 不改变 DOM 结构，只改渲染行为；它对已丢失的空白无能为力。
html-minifier 压缩时如何安全清理多余空白
工具如 html-minifier 在构建阶段移除源码中“不影响渲染”的空白，比如标签之间的换行、缩进、注释，但必须跳过 <pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea> 等语义敏感区域。
- 可安全删除：标签外的换行、
<div>\n <p>xxx</p>\n</div>中的缩进 - 不可删除：
<pre class="brush:php;toolbar:false;"> line1\n line2</pre>里的空格和\n（否则破坏内容） - 需谨慎处理：内联元素间空白（如
<span>a</span> <span>b</span>）删掉会丢掉中间那个空格 - 推荐配置项：
collapseWhitespace: true、removeComments: true、ignoreCustomFragments: [/<pre class="brush:php;toolbar:false;">[\s\S]*?/i]</pre>
性能影响小，但误操作会让内容变形
空白合并本身开销极低，现代浏览器早已高度优化；真正影响体验的是人为干预失当——比如用正则粗暴替换所有 \s+，或在构建流程中错误地清除了 <pre class="brush:php;toolbar:false;"></pre> 里的换行。
最容易被忽略的一点：服务器端 gzip 压缩对空白字符敏感度远低于 HTML 解析器。少几个空格确实减小体积，但若因此导致 <pre class="brush:php;toolbar:false;"></pre> 内容错位、诗歌排版崩坏，就得不偿失。
验证方式很简单：压缩前后对比 document.querySelector('pre').textContent 是否含 \n，以及 innerText 和 textContent 的差异是否符合预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
