直接操作DOM易引发重排重绘降低性能，应通过DocumentFragment批量操作、读写分离、CSS动画替代及虚拟DOM等策略优化。
直接操作 DOM 元素本身很简单，但频繁、低效地操作会拖慢页面响应速度。核心问题不在“能不能做”，而在于“怎么做得更轻量、更可控”。
如何操作 JavaScript 中的 DOM 元素
常见操作包括查找、创建、修改、插入和删除元素。基础流程如下：
-
查找元素：用
document.getElementById()、document.querySelector()或document.querySelectorAll()获取目标节点。 -
创建元素：用
document.createElement()生成新节点，再用textContent或innerHTML设置内容（注意 XSS 风险，优先用textContent）。 -
修改属性或样式：通过
element.className、element.style.color或element.setAttribute()调整；批量样式建议操作className或使用 CSS 类名切换。 -
插入与移动：用
parent.appendChild()、parent.insertBefore()、element.replaceWith()等方法；避免在循环中反复调用appendChild()插入多个元素。 -
删除元素：调用
element.remove()或parent.removeChild(element)。
为什么直接操作 DOM 可能影响性能
DOM 是浏览器渲染引擎与 JS 引擎之间的桥梁，每次操作都可能触发重排（reflow）和重绘（repaint），而这两者开销较大，尤其在低端设备或复杂布局中。
-
重排代价高：修改元素的几何属性（如
width、height、top、display）会迫使浏览器重新计算整个布局树，影响范围可能远超单个元素。 -
频繁读写交替引发强制同步：例如在循环中反复读取
offsetHeight又修改style.left，浏览器不得不立即执行重排以返回准确值，打断渲染优化。 -
大量小操作不如一次批量操作：连续调用 10 次
appendChild()比先构建文档片段（DocumentFragment）再一次性插入慢得多。 -
内联样式和 class 切换效率不同：直接改
element.style.xxx会覆盖 CSS 层叠，且难以复用；用element.classList.toggle()更语义化，也更利于浏览器优化。
更友好的替代思路
不是要完全避开 DOM，而是让操作更“聪明”：
- 用
DocumentFragment批量添加多个节点，减少回流次数。 - 把读操作集中在一起（如先读完所有
offsetTop），再统一写入，避免读写颠倒。 - 对动画类操作，优先使用 CSS transitions / transforms +
requestAnimationFrame，而非 JS 不断改left/top。 - 考虑现代方案如虚拟 DOM（React、Vue）或细粒度响应式库（SolidJS、Svelte），它们通过差异比对减少真实 DOM 操作频次。
不复杂但容易忽略——关键在意识：DOM 不是普通 JS 对象，每次触碰都带着渲染成
本。控制节奏、合并操作、善用浏览器机制，才是高效之道。
