html解析引擎在dom树构建初期即统一压缩连续空白符为单个空格，该过程不可逆且不受css影响；仅、等预格式化上下文内空白被保留。
HTML解析引擎在构建DOM树的初始解析阶段，就把连续空白符（\t、\n、\r、\f、 ）统一转为U+0020空格，并压缩成单个空格——这个动作不可逆，也不受CSS影响。
连续空白符在解析阶段就被压缩，不是渲染时才处理
浏览器不会等到样式计算或布局阶段再去“折叠”空格。只要源码里出现 <p>Hello\n\t\t World</p>，解析器一读到就立刻生成一个文本节点，其 textContent 是 "Hello World"，中间所有换行和制表符都已消失。
- 这个过程发生在DOM树构造之前，属于词法分析环节
-
innerText和textContent都只能读到压缩后的结果，无法还原原始格式 - 哪怕用
document.createElement('p').textContent = 'a b'动态插入，也不会触发二次压缩——因为那是字符串赋值，不是HTML解析
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea> 等标签为何能保留空白
它们不是“绕过”了空白压缩规则，而是被解析器明确标记为“预格式化上下文”，在词法分析时就跳过常规空白合并逻辑。
-
<pre class="brush:php;toolbar:false;"></pre>内部的\n会生成真实换行符节点，\t也保留为制表符 -
<script></script>和<style></style>同样属于预格式化上下文，所以JS代码里的缩进和换行不会被破坏 - 但注意：
<pre class="brush:php;toolbar:false;"></pre>标签本身之间的空白（比如\n<pre class="brush:php;toolbar:false;"></pre>）仍会被压缩或丢弃，只有其内部文本才受保护
属性值里的空白也会被压缩，但不影响语义
HTML解析器对属性值同样执行空白归一化：连续空白被压成单个空格，首尾空白被裁掉。
<div class=" main container "> 解析后，<code>element.className是"main container"-
<img src="a.jpg" alt=" hello world ">→alt属性值为"hello world" - 这种压缩不改变class匹配、资源加载等行为，所以可安全删掉源码中属性值内的换行和多余空格
- 如果你发现设置了
white-space: pre却没效果，大概率是因为源码里根本没换行，或者DOM里已被解析器抹平 - 想真正保留格式，必须从源头入手：
<pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>，或用 -
white-space: pre-line会把换行符当
处理，但前提是DOM里真有\n——而普通文本节点里通常没有
CSS的white-space只控制渲染，不恢复DOM空白
white-space: pre 或 white-space: pre-wrap 只是告诉渲染引擎“别把空格当普通空白处理”，但它面对的是已经压缩过的DOM文本节点——没有原始换行，它也无从保留。
最容易被忽略的一点：你看到的“HTML源码缩进”在绝大多数情况下根本不会进入DOM。删掉所有换行和缩进，只要不破坏 <pre class="brush:php;toolbar:false;"></pre> 内容或内联元素间的有意空格，页面表现完全一致。
