DOM操作会中断HTML解析、阻塞DOM树构建并触发重排重绘；同步脚本暂停解析，动态修改引发子树重建，读取布局属性强制同步重排，频繁操作导致性能急剧下降。
DOM 操作会暂停 HTML 解析
浏览器采用流式解析：网络数据一边接收，HTML 解析器一边构建 DOM 树。但当解析到 <script> 标签（尤其是同步脚本）时，解析会立即暂停，等待 JavaScript 执行完毕——因为脚本可能调用 document.write、修改正在构建的 DOM，甚至删除或重写后续 HTML 内容。
这意味着：
- 内联脚本或未加
async/defer的外部脚本，会同步阻塞解析； - 脚本中若执行
document.getElementById等查询，只能获取到它之前已解析的节点； -
document.write在解析阶段调用，会直接向文档流写入内容，甚至清空当前页面（已不推荐使用）。
脚本执行可能修改尚未完成的 DOM 树
JavaScript 可在 DOM 构建中途介入，例如：
- 在
<head>中执行document.body.appendChild(...)，此时<body>可能还未被解析，浏览器会自动创建body节点并插入； - 通过
innerHTML或appendChild动态添加元素，会触发该片段的重新解析（子树重建），并可能引发后续样式计算与布局； - 修改元素的
class或style属性，虽不改变结构，但会提前激活 CSSOM 匹配与渲染树更新逻辑。
读取布局属性会强制同步重排
即使只是“读”DOM，某些属性访问也会打断浏览器优化机制，强制完成当前所有待处理的样式与布局计算：
立即学习“Java免费学习笔记（深入）”；
- 如
offsetHeight、getComputedStyle()、scrollWidth等，浏览器必须确保返回值准确，因此会立即触发一次同步重排； - 若在循环中反复读写（如“读宽→改宽→再读”），就会形成强制重排-重绘循环，性能急剧下降；
- 这类操作让原本可批量合并的渲染任务被拆散，失去浏览器自身的队列优化能力。
频繁 DOM 修改引发连续重排重绘
每次添加、删除、移动节点，或改变几何属性（width、display、position 等），都会使渲染树部分失效：
- 重排（Reflow）是高代价操作：涉及父容器尺寸重算、子元素位置重定位、文本折行重排等；
- 重排必然触发重绘（Repaint），而重绘本身也需 GPU 或 CPU 绘制图层；
- 连续小量操作（如逐个
appendChild）比一次性插入（用DocumentFragment或innerHTML）多出数十倍开销。
