优化DOM操作的核心是减少重排：缓存DOM引用避免重复查询，用DocumentFragment批量插入以将100次重排降为1次，读写分离避开强制同步布局，并优先通过CSS类切换而非内联样式修改。

直接改 DOM 很容易触发重排，而重排是性能杀手——它要重新计算所有相关元素的位置和尺寸，开销远大于重绘。优化核心就一条：让浏览器少算、晚算、一次算清楚。

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

缓存 DOM 引用，减少查询次数

每次 getElementById、querySelector 都要遍历树，重复查更浪费。 - 把常用元素提前取出来存变量，比如 `const btn = document.getElementById('submit');` - 别在循环里反复查同一个父容器，先拿到再操作 - 属性值也尽量缓存，像 `const width = el.clientWidth;`，避免多次读取触发同步布局

批量插入用 DocumentFragment

往页面里逐个加节点，每加一个都可能重排一次。 - 创建 `const frag = document.createDocumentFragment();` - 所有新节点先 `frag.appendChild()` 进去（不触发渲染） - 最后 `parent.appendChild(frag)` 一次性上树 - 对比：100 个 li，原写法约 100 次重排；用 fragment 只 1 次

读写分离，避开强制同步布局

浏览器会把样式写入延迟到下一帧，但如果你马上读 offsetTop、getComputedStyle 等，它就得立刻重排来给你答案。 - ❌ 错误：`el.style.height = '200px'; console.log(el.offsetHeight);` - ✅ 正确：先批量改完所有样式，再统一读；或用 `requestAnimationFrame(() => { /* 读操作 */ })` 确保在渲染前执行 - 动画中尤其要注意，别在 requestAnimationFrame 回调里又读又写

用 class 切换代替内联 style 修改

直接设 `el.style.width = '100px'` 是强制写内联样式，容易打断浏览器优化节奏。 - 提前在 CSS 里定义好类，如 `.wide { width: 100px; }` - JS 里只操作 `el.className = 'wide'` 或 `el.classList.add('wide')` - 浏览器能合并样式变更，批量处理，更高效也更可控

不复杂但容易忽略。关键不是“不能动 DOM”，而是“怎么动更聪明”。