DOM操作易触发重排（如改宽高、调offsetTop）、重绘（如改color）、布局抖动（读写交替）、内存泄漏（事件未解绑）及null错误（脚本执行过早）。
DOM 操作看似简单，实则牵一发而动全身。每一次读写都可能触发浏览器底层的渲染流水线，带来不可忽视的副作用。理解这些副作用，是写出高性能、可预测代码的前提。
触发重排（Reflow）——最昂贵的代价
重排是浏览器重新计算所有元素几何属性（位置、尺寸、边距等）的过程，会波及整个渲染树或其大范围子树。以下操作极易引发重排：
- 修改元素的宽度、高度、padding、margin、border、position、display、font-size 等影响布局的样式
- 添加、删除或移动可见 DOM 元素
- 调用会强制同步计算布局的属性，如 offsetTop、offsetHeight、clientWidth、scrollLeft、getComputedStyle()
- 访问元素的 scrollTop 或 scrollHeight（尤其在滚动监听中易被忽略）
重排必然伴随重绘，且一次重排可能引发多次连锁反应，是性能卡顿的主因之一。
引发重绘（Repaint）——次一级但高频的开销
重绘发生在元素外观改变但布局未变时，例如修改 color、background-color、visibility、outline、box-shadow 等。虽然比重排轻量，但频繁重绘仍会消耗 GPU 和内存资源。
立即学习“Java免费学习笔记（深入）”；
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 大量元素同时应用 opacity 动画（未启用 will-change 或硬件加速时）
- 反复切换 class 导致背景色/字体颜色快速变化
- 在动画帧中逐像素修改 style.left 或 style.top（应改用 transform）
打断浏览器优化节奏——布局抖动（Layout Thrashing）
这是重排的“组合拳”：在一次 JS 执行中，交替读取布局信息与写入样式，迫使浏览器反复回流。例如：
- 循环中每轮都读 offsetTop → 改 style.width → 再读 offsetTop
- 事件处理函数里先获取 clientHeight，再设 innerHTML，再调 getBoundingClientRect()
浏览器无法合并优化，只能一次次中断执行、刷新布局，造成严重性能浪费。
隐式内存与事件泄漏
DOM 操作本身不直接导致内存泄漏，但不当使用会间接引发：
- 为动态生成的元素绑定事件监听器后，未在移除元素时 removeEventListener 或清空引用
- 闭包中长期持有对 DOM 节点的引用（如回调函数中保存 element），即使节点已从文档中移除
- 使用 innerHTML = ... 替换内容时，原节点上的事件监听器和数据绑定被静默丢弃，但若代码中仍有变量引用旧节点，它就无法被垃圾回收
脚本执行时机错位——常见 null 错误根源
副作用不仅来自操作本身，更常源于操作发生的时机：
- 脚本置于 <head> 中，早于 DOM 解析完成，getElementById 返回 null
- 异步加载的模块或数据就绪前，就尝试操作目标元素
- 监听 load 事件却误传执行结果而非函数引用，导致回调未注册或立即执行失败
这类问题不会报错，但逻辑失效，调试成本高。
