dom性能优化核心是减少重排重绘、降低内存占用：缓存dom引用、用documentfragment批量更新、以class切换替代内联样式、采用事件委托。
DOM 结构设计和事件绑定方式，直接影响页面渲染性能与交互响应速度。优化不是追求极致代码，而是让浏览器更“省力”——减少重排重绘、降低内存占用、避免隐式强制布局。
缓存 DOM 引用，避免重复查询
每次调用 document.getElementById、querySelector 等方法，浏览器都要遍历树结构查找节点，开销不小。尤其在循环或高频回调中反复查询，性能损耗明显。
- 把常用元素提前获取并赋值给常量或变量，如
const $list = document.querySelector('#item-list'); - 不要在 for 循环内部写
document.querySelector('.item')，应在外层查一次，再复用 - 对动态生成的节点，若需多次操作其子元素，也建议缓存其引用，而非每次都重新
el.querySelector
批量更新 DOM，优先用 DocumentFragment
逐个 appendChild 或拼接 innerHTML 字符串插入，会触发多次重排。DocumentFragment 是轻量级 DOM 容器，不直接挂载到页面，适合在内存中组装结构。
- 创建
const frag = document.createDocumentFragment() - 循环中用
frag.appendChild(el)添加节点 - 最后一次性
$list.appendChild(frag)，只触发一次重排 - 比字符串拼接 +
innerHTML更安全（防 XSS）、更可控（可绑定事件、设置属性）
用 class 切换代替内联样式操作
频繁修改 element.style.xxx 会触发同步布局计算，尤其是连续读写 offsetHeight、clientWidth 等属性时，容易造成“布局抖动”。
- 把样式规则写进 CSS 类，如
.hidden { display: none; }，再用el.classList.toggle('hidden') - 需要批量设样式时，改用
el.style.cssText = 'width:100px;height:20px;'，比多次赋值更高效 - 若必须读取布局信息（如位置、尺寸），尽量集中读取、集中写入，避免“读-写-读-写”交错
事件委托替代大量单独绑定
为上百个列表项每个都绑 click，不仅慢，还可能引发内存泄漏（尤其未清理时）。事件委托利用冒泡机制，在父容器监听，再根据 event.target 判断来源。
- 只需绑定一次：
container.addEventListener('click', handler) - 在 handler 中用
if (e.target.matches('.btn-delete')) { ... }区分目标 - 动态添加的子元素天然支持，无需重新绑定
- 注意：委托层级不宜过深；避免在
body上监听所有点击，应限定在业务容器内
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
