🎨 当浏览器变成装修工：重绘与重排的爱恨情仇🏠 故事开始：浏览器的装修日记想象你正在装修房子：布局(Layout

🏠 故事开始：浏览器的装修日记

想象你正在装修房子：

布局(Layout) = 设计图纸（确定家具位置和大小）
重排(Reflow) = 突然决定把沙发从客厅搬到卧室（所有家具位置都要重新计算）
重绘(Repaint) = 给墙壁换颜色（家具位置不变，只是表面刷新）今天我们就通过一些简单的代码，聊聊这两个让前端开发者又爱又恨的概念。

🚀 代码里的性能陷阱

反面教材：让CPU崩溃的JS动画

先看代码：

let width = 0;
function move() {
  width += 2;
  box.style.width = width + 'px'; // 每次修改都会触发重排
  if(width < 300) {
    requestAnimationFrame(move);
  }
}

重绘重排1.gif

这段代码通过不断修改 width 属性实现动画，就像你每分钟都要重新测量房间大小——浏览器会疯狂执行：

计算盒子新尺寸（重排）
重新绘制像素（重绘）
重复上述步骤...

优化尝试：CSS Transition的救赎

再看改进代码：

.box {
  transition: left 1s ease-out; /* 比JS动画更聪明 */
}
.box.active {
  left: 300px; /* 仍然会触发重排 */
}

重绘重排2.gif

虽然CSS过渡比JS动画高效，但修改 left 属性依然会触发重排。就像你虽然请了装修公司，但还是要天天改设计图。

💡 性能优化的黄金法则

我们一一来揭秘，其实浏览器有个隐藏福利：

transform和opacity属性不会触发重排！

它们就像给元素开了VIP通道，直接交给GPU处理，跳过布局计算环节。把上面的代码改成这样：

.box.active {
  /* left: 300px; */ /* 👈 这是青铜玩家的做法 */
  transform: translateX(300px); /* 👑 这是王者操作 */
}

重绘重排3.gif

🕵️‍♂️ 如何检测重排和重绘？

打开 Chrome DevTools（开发者工具）。
- 右键点击页面并选择 “检查” （Inspect），或者使用快捷键 Ctrl+Shift+I（Windows/Linux）或 Cmd+Opt+I（Mac）。
转到 “Performance” 面板。
- 在DevTools界面顶部的标签中，选择 Performance 标签。
启用 Paint flashing：
- 在 Performance 面板中，点击右上角的 三个垂直点（更多选项），然后选择 “Settings” 。
- 在设置面板中，找到 “Rendering” 部分，勾选 “Paint flashing” 选项。
启用 Layout Shift Regions
- 在 “Rendering” 同样找到 Layout Shift Regions，勾选上。
启用后，浏览器会在页面绘制时以闪烁的方式显示出每次重绘的区域，帮助你分析页面渲染的性能瓶颈。