documentfragment能将多次dom操作合并为一次重排，因其是离线轻量容器，操作时不触发渲染，仅在一次性插入真实dom时执行一次布局和绘制。
直接改样式不触发重排，几乎不可能；但你可以让重排次数从“几十次”压到“1次”，甚至让浏览器跳过它——关键不在“要不要重排”，而在“什么时候、以什么方式触发”。
哪些 DOM 操作会强制同步重排
不是所有 DOM 修改都一样。有些操作一执行，浏览器立刻停下 JS 线程，回滚样式队列，重新计算整个布局树——这就是强制同步重排，卡顿的根源。
-
offsetWidth、offsetHeight、getBoundingClientRect()、getComputedStyle()这类读取布局信息的 API，只要一调用，就 flush 掉所有待处理的样式变更 - 在循环里反复写
el.style.left = x + 'px'再读el.offsetLeft，等于每轮都逼浏览器重排一次 - 用
document.getElementsByTagName('div')这种 live collection 遍历时，每次访问都可能触发重排（它实时响应 DOM 变化） - 修改
style.width后紧跟着读el.clientWidth，浏览器没得选，只能立刻 layout
怎么批量改 DOM 才只触发一次重排
浏览器本就会合并样式变更，但前提是别打断它。你得把“改”和“读”彻底分开，且把多个 DOM 变更打包成一次提交。
- 用
document.createDocumentFragment()收集所有新节点，最后只调一次parent.appendChild(fragment) - 要清空再填内容，用
el.innerHTML = htmlString比循环el.removeChild()+el.appendChild()快得多——前者走浏览器内部 HTML 解析优化路径 - 如果只是文本更新，用
el.textContent = str，避免 HTML 解析开销 - 临时隐藏元素：先设
el.style.display = 'none'，改完再恢复，期间所有操作都不进渲染树
哪些 CSS 属性能绕过重排直接走合成
transform 和 opacity 是唯二被现代浏览器明确保证“不触发布局”的动画属性，但前提是元素已提升为独立图层。
- 位移优先用
transform: translateX(10px)，别用left: 10px；缩放用scale()，别碰width/height -
opacity可替代visibility: hidden或display: none做淡入淡出，但它仍响应事件——真要禁交互，得加pointer-events: none -
will-change: transform要慎用：只在真正开始动画前加，动画结束立刻移除；加太多会导致 GPU 内存暴涨、纹理上传变慢 -
contain: paint比will-change更轻量，能限制重绘范围，适合固定区域内容频繁更新的场景（比如聊天消息流）
为什么 class 切换比内联 style 更安全
不是 class 本身多高级，而是它把样式变更从“JS 即时写入”变成了“CSS 引擎统一调度”，天然避开读写冲突。
- 写
el.className = 'active'不会立刻触发重排，浏览器等样式计算阶段统一处理 - 多个 class 切换（比如
el.classList.add('fade', 'in', 'visible')）仍只算一次样式变更 - 内联 style 每设一个属性，都可能触发一次重排（尤其当该属性是几何类时），而 class 把所有相关样式封装在 CSS 规则里
- 维护性也高：样式逻辑集中在 CSS 文件，JS 只管状态，不掺杂像素值
最常被忽略的一点：重排不是“能不能避免”的问题，而是“能不能控制它发生的时间和范围”。哪怕只改一个按钮的 margin，也可能导致整行文字重排——因为行内元素的布局依赖兄弟节点。所以别只盯着单个元素，得看它在渲染树里的上下文位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
