DOM操作本身不拖慢JS性能，但频繁低效访问（如循环中多次调用getElementById）会因重复遍历、布局计算和同步开销导致卡顿；应缓存元素引用并批量更新。
DOM 操作本身不会拖慢 JS 性能，但频繁、低效的 DOM 访问和修改会显著拖慢页面响应——问题不在 DOM 存在，而在你如何跟它打交道。
为什么 document.getElementById 多次调用很慢
每次调用 document.getElementById 都触发一次 DOM 树遍历，即使元素没变，浏览器也要重新定位。真实场景中常被忽略的是：它不是纯内存读取，而是带布局计算开销的同步操作。
- 在循环里反复写
document.getElementById('list')，等价于每轮都“出门找一次门牌号” - 如果目标元素已被移除或重排（比如父容器
innerHTML被重写），还可能返回null导致后续报错Cannot read property 'appendChild' of null - 更优做法是查一次、存变量：
const listEl = document.getElementById('list'); for (let i = 0; i < items.length; i++) { listEl.appendChild(createItem(items[i])); }
innerHTML 批量插入比 appendChild 快，但有陷阱
innerHTML 确实快——因为它把字符串交给浏览器原生解析器批量构建节点；而反复 appendChild 会多次触发样式计算与重排。但代价是：它会销毁原有子节点绑定的事件监听器，且无法校验 HTML 字符串安全性。
- 适合场景：纯展示型列表初始化、服务端已过滤/转义的 HTML 片段
- 危险操作：
el.innerHTML = '<div onclick="doSomething()">' + userInput + '</div>'—— 直接执行用户输入，XSS 风险 - 安全替代：
el.insertAdjacentHTML('beforeend', sanitizedHTML)，配合DOMPurify.sanitize()过滤
CSS 触发重排（reflow）的 DOM 属性访问要慎用
读取 offsetHeight、clientWidth、getComputedStyle() 等属性时，若页面存在未 flush 的样式变更，浏览器会强制同步计算布局（reflow），阻塞 JS 执行。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 典型反模式：
box.classList.add('expanded'); console.log(box.offsetHeight); // 此刻触发 reflow box.classList.add('animated'); console.log(box.offsetHeight); // 再次触发 reflow - 优化方式：把所有读操作集中到写操作之后，或用
getBoundingClientRect()替代多次offset*访问 - 现代替代：对动画类需求，优先用 CSS
transform和opacity，它们走合成层，不触发重排
用 DocumentFragment 减少真实 DOM 变动次数
当你需要往一个容器里添加 50 个新节点，逐个 appendChild 会让浏览器反复计算布局；而先挂到 DocumentFragment，再一次性插入，只触发一次重排。
-
DocumentFragment是轻量级文档对象，不直接关联页面，无渲染开销 - 示例：
const frag = document.createDocumentFragment(); items.forEach(item => frag.appendChild(createItem(item))); listEl.appendChild(frag); // 仅此处触发真实 DOM 更新
- 注意：
frag不能用innerHTML赋值（它没有innerHTML属性），需用appendChild或append()
DOM 不是性能敌人，但它的同步性、延迟性、与渲染管线的强耦合，会让“看似简单”的一行代码变成性能瓶颈。最常被跳过的其实是测量——别猜，用 Chrome DevTools 的 Performance 面板录一段操作，看看到底哪行 offsetTop 或哪个 for 循环里的 querySelector 在吃掉帧率。
