DOM操作慢的根本原因是重排和重绘，重排重新计算元素几何信息并必然触发重绘，重绘仅改变外观；读写布局属性交替会强制同步重排，用DocumentFragment批量插入可大幅减少重排次数。
DOM操作慢，根本原因不是JavaScript本身，而是每次修改都可能触发
浏览器
重排（reflow）和
重绘
（repaint）——这两步是渲染流水线中最耗资源的环节。重排比重绘代价高得多，而很多看似“只是改个颜色”的代码，其实悄悄引发了重排。
什么是重排（reflow）和重绘（repaint）？
重排是浏览器重新计算所有元素几何信息（位置、尺寸）的过程；只要改动了
、
、
、
、
或增删节点，就大概率触发重排。重绘则只发生在外观变化但布局不变时，比如改
、
、
。
关键点：
重排必然触发重绘，但重绘不一定触发重排
。频繁重排会让页面卡顿，尤其在中低端设备上明显。
常见误触重排的操作：
、
、
等读取布局属性时，如果之前有未应用的样式写入，浏览器会强制同步刷新（forced synchronous layout）
一个
循环里边读边写，很容易变成“写→读→写→读…”的恶性循环，每轮都强制重排
用
批量插入节点
这是最直接、见效最快的优化手段：把多次 DOM 插入合并成一次，把 100 次重排压成 1 次。
立即学习
“
Java免费学习笔记（深入）
”；
错误写法（每轮都触发重排）：
正确写法（只触发 1 次重排）：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
不在真实 DOM 树中，对它的操作完全不触发渲染
适用于动态生成列表、表格、表单项等场景
注意：不能用
赋值给 fragment，它不支持该属性；必须用
或
用 class 切换代替逐条改
直接赋值
会强制浏览器同步计算样式，极易引发重排；而切换预设好的 CSS 类，由浏览器批量处理，更可控也更高效。
CSS 中定义：
JS 中只需：
避免这样写：
—— 多次写入，可能多次重排
优先使用
和
动画属性，它们走合成层（GPU），跳过 Layout 和 Paint 阶段
慎用
，它虽可提示浏览器提前优化，但滥用会吃内存，只在明确要动画的元素上加
缓存查询结果 + 事件委托防爆栈
重复调用
或
不是“小开销”，而是每次都要遍历 DOM 树。更危险的是为每个子元素绑定事件监听器，100 个按钮 = 100 个监听函数，内存和性能双拖累。
缓存 DOM 引用：
查一次，后面全用这个变量
事件委托：把监听器挂在父容器上，靠
判断来源
这招在动态增删子项的列表、评论区、弹窗组件里特别管用——不用每次新增都手动绑定事件，也不怕节点被移除后监听器残留。
真正容易被忽略的，是“读写分离”：别在循环里一边改样式一边读
；先把所有写操作做完，再统一读。否则，你写的每一行 JS，都在悄悄让浏览器停下主线程、重跑整个渲染流程。
widthheighttopdisplayfont-sizecolorbackground-coloropacityoffsetTopclientWidthgetComputedStyle()forDocumentFragmentconst list = document.getElementById('list');
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
list.appendChild(li); // ❌ 每次都插入真实DOM
}const list = document.getElementById('list');
const fragment = document.createDocumentFragment(); // ✅ 内存中的虚拟容器
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = `Item ${i}`;
fragment.appendChild(li); // ✅ 全部塞进fragment，不触发重排
}
list.appendChild(fragment); // ✅ 一次性上树DocumentFragmentinnerHTMLappendChildappendstyleelement.style.width = '200px'.highlight {
background-color: #ffeb3b;
font-weight: bold;
transform: scale(1.05);
}element.classList.add('highlight'); // ✅ 单次操作，且 transform 不触发重排element.style.backgroundColor = '...'; element.style.fontWeight = '...';transformopacitywill-changedocument.getElementByIdquerySelectorconst btn = document.querySelector('#submit');e.targetdocument.getElementById('item-list').addEventListener('click', function(e) {
if (e.target.matches('button.delete')) { // ✅ 只绑1个监听器
e.target.closest('li').remove();
}
});offsetHeight