标准答案
- 重排也叫 reflow 或 layout，指浏览器重新计算元素尺寸、位置、换行和父子布局关系。
- 重绘也叫 repaint，指布局位置不变，但颜色、背景、阴影这类外观需要重新绘制。
- 重排通常比重绘更重，因为它会影响布局树，可能牵连父元素、子元素和后续兄弟元素。
- 修改 width、height、margin、padding、display、position、font-size，插入删除 DOM，或者读取 offsetWidth、clientHeight、getComputedStyle，都可能触发重排或强制同步布局。
- 优化思路是批量读写 DOM、用 class 一次性改样式、动画优先用 transform 和 opacity、减少深层 DOM，必要时再用 contain 或 will-change，但不要滥用。
题目解析
这是一道前端高频性能题。标准答案至少要覆盖：定义、触发属性、读写布局导致强制同步布局、优化方式。
严格来说现代浏览器渲染还有合成阶段。transform 和 opacity 通常更容易交给合成线程处理，所以动画性能更稳定。
代码示例
避免循环里反复读写布局，可以先读后写或批量加 class。
JavaScript
const width = list.offsetWidth
items.forEach((item) => {
item.style.width = width + 'px'
item.classList.add('is-ready')
})CSS
.panel {
transform: translateX(0);
opacity: 1;
transition: transform 200ms ease, opacity 200ms ease;
}常见误区
- 把重排和重绘混为一谈，不区分布局计算和像素绘制。
- 在循环中交替读取 offsetWidth 和修改 style，造成强制同步布局。
- 滥用 will-change，导致内存和合成层成本上升。