会，直接修改 style 属性易触发重排；读写布局属性或“读-写-读”模式会强制同步重排；推荐用 classList 批量切换预定义 CSS 类，或用 DocumentFragment 批量操作 DOM。
直接修改 style 属性会触发重排吗？
会，而且非常容易踩坑。只要读取布局相关属性（比如 offsetHeight、getBoundingClientRect()）或写入影响几何的样式（比如 width、top、left），浏览器就可能立刻触发重排。更隐蔽的是“读-写-读”模式：
element.style.width = '200px'; console.log(element.offsetHeight); // 这里强制重排 element.style.height = '100px'; // 再次重排浏览器无法批量优化，只能逐条执行。
用 className 或 classList 批量切换样式更安全
把多个样式变更收敛到一个 CSS 类里，再通过 JS 切换类名，能避免反复触发布局计算。浏览器只在类名变更后统一计算一次。
-
element.className = 'active expanded'—— 覆盖全部类，慎用 -
element.classList.add('active', 'expanded')—— 推荐，增量控制 -
element.classList.toggle('hidden')—— 适合开关类
对应 CSS 需提前定义好组合效果：
.card.active.expanded {
width: 300px;
height: 200px;
transform: scale(1.05);
}注意：transform 和 opacity 不触发重排，优先用它们做动画。
批量 DOM 操作尽量用 DocumentFragment 或离线节点
频繁 appendChild 多个子元素时，每调用一次都可能引发重排。正确做法是先构建完整结构，再一次性挂载。
- 用
DocumentFragment收集节点：const frag = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = `Item ${i}`; frag.appendChild(li); } ulElement.appendChild(frag); // 只触发一次重排 - 或先
ulElement.style.display = 'none'，操作完再恢复显示（注意 visibility 仍占布局空间，display 才真正移出流）
哪些 CSS 属性修改不触发重排？
只影响绘制（paint）或合成（composite）层的属性，改动不会导致几何重算，性能极高：
-
transform（包括translate、scale、rotate） opacity-
filter（部分滤镜如blur()可能触发重绘但不重排） -
will-change: transform可提前提示浏览器升层，但别滥用
反例：改 margin、padding、border、width、height、top 等都会直接改变盒模型，大概率触发重排。尤其在循环中读写混用，性能雪崩很常见。
立即学习“Java免费学习笔记（深入）”；
