强制同步重排由js中读取offsetwidth、offsetheight、getboundingclientrect()、getcomputedstyle()等布局属性触发，尤其在“写样式后立即读取”或遍历live collection时；documentfragment批量插入、class切换替代内联style、隐藏元素后再操作可避免。
哪些 DOM 操作会立刻触发强制重排
不是所有 DOM 修改都“等浏览器自己合并”，有些操作一执行，JS 线程就卡住，浏览器必须立刻 flush 样式队列、重新 layout——这就是强制同步重排。典型触发点包括：offsetWidth、offsetHeight、getBoundingClientRect()、getComputedStyle()。只要在写样式后紧跟着读这些值，比如循环里反复 el.style.left = x + 'px' 再读 el.offsetLeft，等于每轮都逼浏览器重排一次。
另一个隐形雷区是 live collection：用 document.getElementsByTagName('div') 遍历时，每次访问 .length 或索引项，都可能触发重排，因为它实时响应 DOM 变化。改用 document.querySelectorAll('div') 返回静态 NodeList 更安全。
批量改 DOM 时怎么只触发一次重排
浏览器本就会合并样式变更，但前提是你别打断它——把“改”和“读”彻底分开，且把多个变更打包成一次提交。
- 用
document.createDocumentFragment()收集所有新节点，最后只调一次parent.appendChild(fragment) - 要清空再填内容，优先用
el.innerHTML = htmlString，比循环el.removeChild()+el.appendChild()快得多（走浏览器内部 HTML 解析优化路径） - 只是文本更新？用
el.textContent = str，避免 HTML 解析开销 - 临时隐藏元素做批量操作：先设
el.style.display = 'none'，改完再恢复；期间所有操作都不进渲染树
为什么 class 切换比内联 style 更可靠
不是 class 天然高级，而是它把样式变更从“JS 即时写入”变成了“CSS 引擎统一调度”。例如：el.className = 'active' 或 el.classList.add('hover') 不会立刻触发布局计算，而 el.style.width = '200px' 是直接写入 style 属性，浏览器无法延迟处理。
更关键的是，class 切换天然避开“读-改”冲突：你不会在加 class 后立刻去读 offsetHeight，但写内联 style 时极易这么干。
实操建议：
• 所有可复用的样式规则都定义在 CSS 文件里
• JS 只负责开关 class，不碰 style 属性
• 动画类名加 transition 或 animation，由 CSS 引擎接管时序
哪些 CSS 属性能跳过重排直接走合成
transform 和 opacity 是唯二被现代浏览器明确保证“不触发布局”的动画属性，但前提是元素已提升为独立图层。
位移必须用 transform: translateX(10px)，别用 left: 10px；缩放用 scale()，别动 width/height；淡入淡出用 opacity，别用 visibility: hidden 或 display: none（后者会改变文档流）。
注意：will-change: transform 要慎用——只在真正开始动画前加，动画结束立刻移除；加太多会导致 GPU 内存暴涨、纹理上传变慢。更轻量的替代是 contain: paint，适合固定区域内容频繁更新（比如聊天消息流）。
容易被忽略的一点：隐式图层创建本身有开销。每个 transform 元素都会触发 GPU 内存分配，大量使用反而增加内存压力和纹理上传耗时——不是“加了就一定快”，得看实际场景和数量级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
