dom操作本身不慢，慢的是触发的重排与重绘；优化关键是减少触发次数、合并操作、避开同步布局陷阱，如缓存节点、批量修改、避免读写交替、使用事件委托等。
DOM 操作本身不慢，慢的是它触发的浏览器渲染行为——每次修改都可能引发重排（reflow）和重绘（repaint），而这两者是主线程密集型任务。优化核心不是“少写 JS”，而是让浏览器更省力：减少触发次数、合并操作、避开同步布局陷阱。
缓存查询结果，避免重复遍历
DOM 查询（如 querySelector、getElementById）虽快，但反复调用仍消耗 CPU 且易引发意外性能问题。尤其在循环或高频回调中，未缓存的查询会叠加开销。
- 把常用节点赋值给常量或局部变量，例如：
const header = document.getElementById('header'); - 避免在 for 循环里反复查同一个父容器，提前获取再复用
- 慎用
getElementsByClassName等返回实时集合（Live Collection）的方法——它们会在 DOM 变化时动态更新长度，导致循环跳项或死循环
批量修改，一次提交
浏览器对连续的 DOM 写入有优化机制，但前提是“写完再读”或“集中写”。零散操作会迫使浏览器多次计算布局，而批量处理可压缩为一次重排。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 用
document.createDocumentFragment()在内存中构建完整结构，最后一次性挂载 - 拼接 HTML 字符串后赋值给
innerHTML（注意 XSS 风险，仅用于可信内容） - 修改多个样式时，优先切换 class 名，而非逐个设
style.xxx；或用element.style.cssText = 'width:100px;height:200px;'合并设置
避开强制同步布局
当 JS 读取布局信息（如 offsetHeight、getBoundingClientRect()）后立刻写样式，浏览器必须立即计算当前布局——这打断了渲染流水线，造成“布局抖动”（Layout Thrashing）。
- 按“全部写 → 全部读”顺序组织代码，不要交替进行
- 动画场景下，用
requestAnimationFrame包裹读写操作，确保在下一帧开始前完成 - 对频繁读写的元素，可先用
el.style.display = 'none'脱离渲染树，改完再恢复显示
事件委托代替遍历绑定
为大量子元素（如列表项、表格行）逐一添加事件监听器，不仅内存占用高，还增加初始化时间。利用事件冒泡，在父级统一处理更轻量、更易维护。
- 监听父容器的点击事件，用
event.target判断实际触发源 - 适用于动态增删子节点的场景——新节点无需额外绑定
- 注意过滤非目标元素（如文本节点、图标子元素），可用
event.target.closest('.item')
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
