应避免循环中反复查询DOM，优先用document.querySelectorAll批量获取后处理；遍历子节点时用children而非childNodes；事件委托推荐用closest+matches。
避免反复查询 DOM，用 document.querySelectorAll 一次性获取再处理
频繁调用 document.getElementById 或 document.querySelector 是性能杀手，尤其在循环中。浏览器每次都要重新遍历树结构，开销明显。
更高效的做法是：先用 document.querySelectorAll 批量获取所有目标节点，返回的是 NodeList（类数组），再用 forEach 或传统 for 遍历处理。
const buttons = document.querySelectorAll('button[data-action]');
buttons.forEach(btn => {
btn.addEventListener('click', handler);
});-
querySelectorAll支持复杂选择器（如[data-action="save"]），比多次getElementById更灵活 - 返回的
NodeList在现代浏览器中是可迭代的，无需转成数组；若需数组方法（如map），可用[...buttons]展开 - 注意：它返回的是静态快照，后续 DOM 变化不影响已获取的列表
遍历子节点时优先用 children 而非 childNodes
childNodes 包含文本节点、注释节点等所有节点类型，实际业务中多数只关心元素节点（Element）。用它遍历时得反复判断 node.nodeType === 1，既啰嗦又易错。
children 只返回元素子节点，类型安全、语义清晰、性能略优。
立即学习“Java免费学习笔记（深入）”；
const container = document.getElementById('list');
// ✅ 推荐：只遍历元素节点
for (let i = 0; i < container.children.length; i++) {
const el = container.children[i];
if (el.matches('.item')) {
process(el);
}
}
// ❌ 不推荐：混入空白文本节点，容易漏判或报错
container.childNodes.forEach(node => {
if (node.nodeType === 1 && node.matches('.item')) {
process(node);
}
});
-
children是实时集合（live collection），DOM 变化会反映在其length和索引上；若需稳定遍历，建议先缓存长度或用扩展运算符转成数组 - IE8- 不支持
children，但这类环境现在基本可忽略
批量 DOM 修改用 DocumentFragment 减少重排重绘
向页面连续插入多个节点（比如动态生成列表）时，每插入一次都可能触发浏览器布局计算（reflow）和绘制（repaint），性能急剧下降。
解决方案是：先创建 DocumentFragment，把所有新节点 append 到它里面，最后只做一次真实 DOM 插入。
const fragment = document.createDocumentFragment(); const data = ['Apple', 'Banana', 'Cherry'];data.forEach(text => { const li = document.createElement('li'); li.textContent = text; fragment.appendChild(li); // 不触发渲染 });
document.getElementById('fruit-list').appendChild(fragment); // 仅一次渲染
-
DocumentFragment不在主 DOM 树中，操作它完全不触发样式计算或布局 - 现代框架（如 React）内部也采用类似思路做批量更新，手动操作时这个技巧依然有效
- 替代方案：用字符串拼接 +
innerHTML，但要注意 XSS 风险和事件绑定丢失问题
用 closest 和 matches 替代手写向上/向下遍历逻辑
事件委托场景下，常需要从点击目标向上找某个祖先元素（如 event.target.closest('.card')），或判断某元素是否匹配选择器（el.matches('[data-id]')）。手写 while 循环向上找父级，既冗长又容易漏掉边界（比如到 document 或 null 停止）。
closest 和 matches 是原生、简洁、健壮的替代方案。
document.body.addEventListener('click', e => {
const card = e.target.closest('.card');
if (!card) return;
const action = card.querySelector('[data-action]');
if (action && action.matches('[data-action="delete"]')) {
deleteCard(card);
}
});
-
closest从当前元素开始向上查找，包含自身；返回第一个匹配的祖先（含自己），没找到返回null -
matches判断当前元素是否匹配给定选择器，不触发重排，比querySelector更轻量 - IE 不支持这两个 API，但可用 polyfill，或简单封装兼容逻辑（如检查
Element.prototype.closest是否存在）
DOM 操作的效率瓶颈往往不在单次调用，而在重复、无意识的低效模式——比如在循环里查 DOM、用 childNodes 处理 UI 元素、直接插入未聚合的节点。这些点一旦固化为习惯，调试时很难定位。真正影响体验的，通常是几十次毫秒级开销叠加后的卡顿，而不是某一行代码慢了 10ms。
