01

60 秒回答模板

重排也叫回流，是元素几何信息变化后浏览器重新计算布局，例如 DOM 结构、宽高、位置、字体、窗口尺寸变化。重绘是布局不变但外观变化时重新绘制像素，例如颜色、背景、阴影变化。重排通常会导致重绘，成本更高；某些 transform、opacity 变化可以只走合成。优化上要减少 DOM 规模和频繁样式变更，批量读写布局，避免边读 offsetWidth 边改 style 造成强制同步布局，动画优先使用 transform/opacity，并用 DevTools Performance 验证 Layout、Paint 和 Composite 的耗时。

考点 核心机制与工程取舍
难度 中高频面试题
回答目标 按定义、机制、场景讲清楚
02

深入解析

01

渲染链路先讲清

浏览器大致经历 DOM/CSSOM、样式计算、布局、绘制和合成。重排发生在布局阶段，重绘发生在绘制阶段，合成负责把不同图层组合到屏幕上。

02

什么会触发重排

DOM 增删、元素尺寸位置变化、display 变化、字体变化、内容变化、窗口 resize、读取某些布局信息前有未完成样式更新，都可能触发布局计算。重排影响范围可能从局部元素扩大到整页。

03

什么会触发重绘

颜色、背景、边框颜色、visibility、box-shadow 等外观变化通常不改变几何信息，只需要重新绘制。它比重排轻，但大面积重绘或复杂滤镜仍可能很贵。

04

合成不是万能

transform 和 opacity 常能在合成层完成，适合动画。但过度提升图层会增加显存和合成成本。will-change 要谨慎使用，用完释放，不能全局乱加。

05

强制同步布局是高频坑

如果代码先改样式，再马上读取 offsetWidth、getBoundingClientRect、scrollTop 等布局信息，浏览器可能被迫立刻刷新布局，打断批量优化。读写交替在循环里尤其容易造成卡顿。

06

优化要有证据

常见做法是批量 DOM 修改、读写分离、减少深层复杂选择器影响、使用 DocumentFragment 或框架批处理、虚拟列表减少节点、动画用 transform/opacity，并通过 Performance 面板看 Layout、Paint、Composite。

03

易错点

  • 把重排和重绘混为一谈，不区分几何变化和外观变化。
  • 只背触发属性，不讲浏览器渲染链路和强制同步布局。
  • 认为 transform/opacity 永远没有成本，忽略图层和显存开销。
  • 优化建议停留在少操作 DOM，不会用 Performance 面板定位 Layout 和 Paint。
04

面试官追问

重排一定会重绘吗？

通常会。布局变了之后像素位置也要更新，所以重排往往带来重绘。反过来，重绘不一定需要重排。

读取哪些属性可能触发布局刷新？

常见有 offsetWidth、offsetHeight、clientWidth、scrollTop、getBoundingClientRect、getComputedStyle 等，前提是浏览器已有待处理的样式或布局变更。

will-change 为什么不能乱用？

它可能提前创建合成层，占用额外内存和显存。少量短期使用能优化动画，长期大量使用会增加合成成本。

display:none 和 visibility:hidden 对布局有什么区别？

display:none 会让元素脱离布局，切换时通常触发重排；visibility:hidden 仍占位，主要影响绘制和可见性。