DOM节点遍历本身不慢，慢的是混入低效操作；应优先用children代替childNodes，避免反复判断nodeType；批量获取节点用querySelectorAll而非循环中重复查询；读写布局属性需分离，避免强制同步布局。
DOM 节点遍历本身不慢，慢的是遍历过程中混入低效操作——比如查错节点类型、反复访问实时集合、或在循环里重复查询 DOM。优化核心是“少走弯路、少做判断、少触发渲染”。
优先用 children 代替 childNodes
childNodes 返回所有子节点（含空白文本、注释），遍历时必须逐个判断 nodeType 才能筛出元素，既冗余又易出错。children 只返回 Element 类型子节点，语义明确、性能更优。
- ✅ 推荐写法：
for (let i = 0; i < parent.children.length; i++) { process(parent.children[i]); } - ❌ 避免写法：
parent.childNodes.forEach(node => { if (node.nodeType === 1) { ... } }); - 注意：children 是实时集合，若遍历中动态增删子元素，length 和索引会变化；如需稳定遍历，可用
[...parent.children]转成数组
批量获取节点，避免循环内反复查询
在 for 或 forEach 中反复调用 document.querySelector 或 getElementById，等于每次都在重跑整个 DOM 树匹配，开销呈线性增长。
- ✅ 正确做法：用
document.querySelectorAll('button[data-action]')一次性获取全部目标节点，再处理 - 返回的是静态 NodeList，后续 DOM 变化不影响已获取结果，适合后续多次遍历
- 现代浏览器中可直接用
forEach；如需 map/filter，用扩展运算符转数组：[...nodes].map(...)
深度/广度遍历按需选择实现方式
递归 DFS 简洁但可能栈溢出（超深 DOM）；非递归 DFS 或 BFS 更可控，尤其适合需要中断、限深、或统一处理层级的场景。
立即学习“Java免费学习笔记（深入）”；
- DFS（递归）适合“找到即停”的查找类任务，例如查找首个符合条件的后代元素
- BFS 更适合“按层处理”，比如高亮当前层级所有 .error 元素，再处理下一层
- 实际项目中，90% 的遍历需求只需
element.querySelectorAll('selector')，比手写遍历更可靠、更高效
避免遍历中触发强制同步布局
一边读取 offsetHeight、getBoundingClientRect 等布局信息，一边修改样式或结构，会让浏览器反复刷新布局队列，严重拖慢遍历速度。
- ✅ 正确顺序：先完成所有 DOM 写操作（添加 class、修改 style.cssText），再统一读取布局数据
- 如必须边读边写，用
requestAnimationFrame把读操作延后到下一帧，让浏览器有机会合并计算 - 对只读遍历（如收集元素尺寸），建议先缓存关键属性值，避免重复读取
