DOM操作优化三原则：少查（缓存节点引用）、查准（优先getElementById、用父容器查询）、稳改（批量操作+文档片段）；事件委托选最近父级；用closest/matches替代手动遍历；性能以DevTools实测为准。
DOM 查询：快准稳的三原则
频繁查节点是性能杀手，核心就三点：少查、查得准、缓存结果。
避免每次操作都用 document.querySelector 或 getElementById 重复查找。尤其在循环或高频事件（如 scroll、input）中，应提前获取并复用引用：
- 把常用父容器缓存在变量里，子元素用 parentElement.querySelectorAll 查，比全量 document 查询快 2–5 倍
- ID 唯一时优先用 document.getElementById，它不走 CSS 选择器引擎，原生最快
- 避免用 getElementsByTagName 或 getElementsByClassName 返回实时集合（HTMLCollection），它们每次访问都重新匹配；如需多次遍历，先转成数组：[...document.getElementsByClassName('item')]
节点增删改：批量操作 + 文档片段
直接对 DOM 连续调用 appendChild、removeChild 会触发多次重排（reflow），开销极大。
正确做法是把多个变更“攒起来”，一次性提交：
- 新增多个节点时，用 document.createDocumentFragment() 作为中转容器，所有 append 都在内存中完成，最后只调一次 parent.appendChild(fragment)
- 删除节点不要逐个 remove，先用 Array.from(parent.children) 快照子节点列表，再遍历移除；或更干脆——清空后批量重建
- 修改样式优先用 class 切换（element.classList.add/toggle），而非反复设 style.xxx，避免强制同步布局计算
事件委托：以一当百的轻量方案
给大量子元素（如列表项、表格行）单独绑定事件，内存占用高、初始化慢、卸载易漏。
统一在父级监听，靠事件冒泡 + event.target 精准识别来源：
- 适用于动态增删的节点，无需重新绑定
- 注意过滤非目标元素，例如：if (e.target.matches('.btn-delete')) { ... }
- 避免在 document 或 body 层级无差别委托，应选最近公共父容器，减少事件传播路径
现代替代方案：用 Element.closest 和 matches 替代遍历
老式写法常靠 while 循环 parentElement 判断祖先关系，既啰嗦又易出错。
现在可直接用语义化 API：
- event.target.closest('.card') —— 向上找第一个匹配的选择器祖先，返回 null 或元素
- el.matches('[data-role="menu-item"]') —— 判断当前元素是否符合某规则，替代手写 className 检查
- 两者均原生支持，无 polyfill 开销，Chrome/Firefox/Edge/Safari 全支持（IE 不考虑）
性能验证：别猜，用 DevTools 实测
优化不是靠感觉。打开 Chrome DevTools → Performance 面板，录制一段典型交互（如点击加载列表），重点关注：
- Layout（重排）和 Paint（重绘）耗时是否陡增？说明 DOM 查询或样式操作过频
- JS 脚本执行是否集中在某段 DOM 操作？右键“Bottom-Up”看调用栈热点
- 使用 console.time('query') 和 console.timeEnd('query') 对比优化前后耗时，尤其在千级节点场景下差异明显
