我们每天dou在与屏幕打交道。你有没有遇到过这样的时刻：满怀期待地打开一个网页，结果它卡得像是在播放幻灯片？或者当你滑动页面时那种令人窒息的掉帧感让你恨不得把电脑砸了？别急着怪网速，也别急着怪电脑配置，这hen可Neng是你代码里的“渲染三兄弟”在作祟。

所谓的“三兄弟”，其实就是浏览器把代码变成画面的三个核心步骤：重排重绘和合成。它们就像三个性格迥异的工匠，有的勤恳但笨重，有的灵巧但忙碌，有的则是个偷懒的天才。今天我们就来扒一扒这三位的底裤，kankan怎么才Neng让他们乖乖听话，让你的页面性Neng飞起。

一、老大重排：拆墙重建的浩大工程

登场的是大哥，学名“Reflow”，也有人叫它“回流”。这哥们儿脾气Zui暴躁，干活Zui累人。

想象一下你家客厅要重新装修。Ru果你只是把沙发换个位置，那还好说。但Ru果你决定要把承重墙拆了或者把地板全部撬开重铺，那会发生什么？你得先把家具搬出去，砸墙，清理垃圾，重新量尺寸，再粉刷，Zui后把家具搬回来。这中间任何一个环节dou不Neng少，累得你半死。

浏览器的重排就是这个道理。当你改变了页面中某个元素的几何属性——比如宽度、高度、位置，甚至是字体大小——浏览器就不得不重新计算整个页面的布局。它得重新构建渲染树，算出每个元素该放在哪，占多大地方。

这还没完，Zui可怕的是“牵一发而动全身”。比如你改了一个div的宽度，可Neng它的父元素要变宽，父元素的兄弟元素要被挤下去，整个页面的滚动条dou要跟着变。这就像你推倒了第一块多米诺骨牌，后面全跟着遭殃。

特别是那个古老的table布局，哪怕你只是改了里面一个小单元格的几个字，dou可Neng触发整个表格的重排。那种代价，简直就是“灾难级”的。所以老大重排的代价极高，Neng不惹他就不惹他。

二、老二重绘：粉刷墙壁的日常琐事

接下来是二哥，学名“Repaint”。比起大哥，二哥要温和得多，但也绝不是省油的灯。

继续用装修的例子。Ru果你不拆墙，也不挪家具，只是觉得墙面的白色太单调，想刷成淡蓝色，或者把那个旧抱枕换个新花色。这时候，你不需要重新计算房子的结构，也不需要搬动沙发，你只需要拿起刷子，把颜色覆盖上去就行了。

这就是重绘。当你修改元素的外观样式，比如背景颜色、边框颜色、文字颜色等，不会影响布局的属性时浏览器就会跳过布局计算这一步，直接重新绘制像素。

虽然比重排轻松不少，但重绘也不是免费的午餐。屏幕上有多少个像素，浏览器就得重新填充多少个点。Ru果你的页面里全是这种操作，哪怕不卡顿，CPU的占用率也会飙升，电脑风扇转得像直升机一样。所以虽然二哥脾气好，但也不Neng让他太忙。

三、老三合成：显卡加速的魔法

Zui后是小弟，学名“Composite”。这哥们儿是个技术宅，也是个偷懒高手，但他干的事儿Zui漂亮。

现在的装修流行“智Neng家居”。你不想动墙，也不想刷漆，你只想换个氛围。于是你打开投影仪，或者换了一块智Neng玻璃，瞬间把客厅从“日式极简风”变成了“赛博朋克风”。你动了吗？没动。墙变了吗？没变。只是画面叠加了一层新的图层。

这就是合成。这是浏览器为了性Neng优化而引入的机制。当你使用某些特定的CSS属性，比如transformopacity时浏览器会把这个元素单独提升到一个“合成层”。

这就像是给这个元素开了个VIP通道，直接交给GPU去处理。后续的动画效果，只需要改变这个图层的位置或者透明度，不需要重新布局，也不需要重新绘制主页面。这就好比你在kan电视，换台只需要按遥控器，不需要去电视台把演播室拆了。

所以为什么现在Zuo动画dou推荐用transform: translateX而不是left？因为left会触发大哥重排，而transform只需要小弟合成，两者在性Neng上的差距，简直就是自行车和火箭的区别。

四、浏览器的心路历程：从代码到像素

为了彻底搞懂这三兄弟，我们得站在浏览器的视角，kankan它是怎么把一堆枯燥的代码变成绚丽画面的。这可不是变魔术，而是一条严谨的生产线。

当你在地址栏输入URL并回车后浏览器会经历一场漫长的旅程：

1. 构建DOM树浏览器把HTML解析成一棵节点树，就像家谱一样，谁是谁的爹，谁是谁的儿子，清清楚楚。 2. 构建CSSOM树浏览器把CSS解析成样式规则，给DOM树上的每个人dou穿上衣服。 3. 构建渲染树DOM和CSSOM结合，剔除那些不可见的元素，生成一棵只包含可见节点的渲染树。 4. 布局这就是大哥重排的地盘。浏览器计算每个节点在屏幕上的确切坐标和大小。 5. 绘制二哥重绘上场。填充像素，画出颜色、边框、阴影。 6. 合成小弟收尾。把各个图层按照正确的顺序和位置叠加在一起，显示在屏幕上。

理解了这个流程，你就知道为什么我们要尽量减少前几步的回滚。一旦到了合成这一步，那就是“轻舟Yi过万重山”了。

五、实战演练：如何驯服这三兄弟

光说不练假把式。既然知道了三兄弟的脾气，我们怎么在写代码时利用他们，避开坑呢？这里有几招“独门秘籍”。

1. 动画的救赎：Transform的崛起

假设你要Zuo一个跟随鼠标移动的小光点，或者一个侧边栏滑出的效果。

hen多新手会这么写：

/* 错误示范：每次移动dou触发重排 */
.box {
  position: absolute;
  left: 0;
  transition: left 0.3s;
}
.box.active {
  left: 100px;
}

这种写法，每一帧动画dou在逼浏览器拆墙重盖。Ru果你的页面复杂一点，用户电脑稍微卡一点，动画就会像PPT。

正确的姿势是用transform

/* 正确示范：只触发合成 */
.box {
  position: absolute;
  transform: translateX;
  transition: transform 0.3s;
  will-change: transform; /* 提前告诉浏览器，我要动这个了准备好GPU */
}
.box.active {
  transform: translateX;
}

这时候，浏览器会把这个元素提升到单独的层，后续的移动完全由GPU接管，流畅得像德芙巧克力。

2. 批量操作的艺术：DocumentFragment

有时候我们需要往页面上添加一大堆数据，比如一个几百条数据的列表。

Ru果你写个循环，每次生成一个li就appendChild一次那你就是在搞“自杀式袭击”。每插入一次浏览器可Neng就要重排一次几百次下来页面还没出来浏览器就累趴了。

// 错误示范：触发无数次重排
const ul = document.getElementById;
for  {
  const li = document.createElement;
  li.textContent = `Item ${i}`;
  ul.appendChild; // 每一次循环dou在折腾浏览器
}

这时候，我们需要一个“文档片段”。它就像一个虚拟的容器，在内存里先把所有东西dou装好，Zui后一次性扔给浏览器。

// 正确示范：只触发一次重排
const ul = document.getElementById;
const fragment = document.createDocumentFragment; // 创建一个虚拟片段
for  {
  const li = document.createElement;
  li.textContent = `Item ${i}`;
  fragment.appendChild; // 先放在内存里不渲染
}
ul.appendChild; // 一次性上屏，完美

这就像搬家，你是把衣服一件一件拿过去，还是装在箱子里一次搬过去？傻子dou知道选后者。

3. 读写分离：避免强制同步布局

这是一个非常隐蔽的坑，叫“强制同步布局”。

浏览器是hen聪明的，它通常会为了性Neng，把一批读写操作攒在一起处理。但Ru果你在代码里一会儿读布局，一会儿写布局，浏览器就被迫为了给你Zui新的数据，立刻停止当前的优化，马上去重新计算布局。

kan下面这个例子：

// 错误示范：读写交替，浏览器崩溃
const boxes = document.querySelectorAll;
for  {
  // 读取：获取宽度，浏览器为了准确，必须先计算当前布局
  let width = boxes.offsetWidth;
  // 写入：修改宽度
  boxes.style.width = width + 10 + 'px';
  // 循环下一轮，又要读，又要重新算...
}

这就好比你一边砌墙，一边还要拿尺子量墙有多高，量完又砌两块，又量。效率极低。

正确的Zuo法是“先读后写”：

// 正确示范：先全部读，再全部写
const boxes = document.querySelectorAll;
const widths = ;
// 第一阶段：只读
for  {
  widths.push;
}
// 第二阶段：只写
for  {
  boxes.style.width = widths + 10 + 'px';
}

这样浏览器只需要在Zui后统一计算一次布局，性Neng瞬间提升。

4. 样式切换的智慧：ClassList

修改样式时尽量使用class来一次性修改，而不是用JS去逐个改style属性。

// 差：多次访问DOM，多次触发重绘
element.style.backgroundColor = 'red';
element.style.color = 'white';
element.style.fontSize = '20px';
// 好：只触发一次重排重绘
element.classList.add;

把样式定义在CSS类里JS只负责切换类名。这不仅解耦了逻辑和样式，还Neng让浏览器有机会进行批量优化。

六、火眼金睛：如何kan穿性Neng瓶颈

说了这么多，怎么知道自己的页面有没有触发过多的重排重绘呢？别猜，用工具说话。

Chrome浏览器自带的开发者工具就是我们的照妖镜。按F12打开，找到Performance面板。

点击录制，然后操作一下你的页面。停止录制后你会kan到一张时间轴图。

留意那些绿色的条和紫色的条。Ru果kan到大面积的绿色或者紫色，那就说明你的页面在频繁重绘和重排。特别是Ru果这些操作把帧率压到了60fps以下出现红色的长条，那就得赶紧优化了。

还有一个geng直观的Rendering选项卡，勾选Paint flashing。当你操作页面时凡是发生重绘的地方，屏幕dou会闪烁绿色。Ru果整个屏幕dou在闪绿光，那画面太美我不敢kan，赶紧去改代码吧。

七、别让用户等待

网页性Neng优化，说难也难，说简单也简单。核心其实就是一句话：理解浏览器的脾气，顺着它的毛摸。

重排、重绘、合成，这三兄弟虽然性格不同，但只要我们掌握了transformDocumentFragment读写分离这些技巧，就Neng让他们各司其职，把页面的性Neng榨干到极致。

在这个快节奏的互联网世界里用户的耐心比金鱼还短。哪怕你的功Neng再强大，Ru果加载慢、动画卡，用户也会毫不犹豫地关掉你的标签页。所以为了留住用户，也为了拯救用户的CPU风扇，让我们一起写出丝般顺滑的代码吧。

毕竟谁不喜欢一个“指哪打哪”、行云流水的网页体验呢？

---