一、先搞懂浏览器渲染的基本逻辑
很多开发者写前端代码时，只关心功能能不能跑通，却忽略了页面卡不卡——尤其是当页面有动画、频繁更新内容时，卡顿感会特别明显。其实页面卡的核心，大多和浏览器的渲染流程有关，我们先把这个流程用大白话讲清楚，别搞复杂的专业术语。
浏览器把代码变成页面的过程，就像装修房子：先拆墙打洞（解析HTML）、再铺水电（解析CSS）、然后把家具摆好（布局）、最后刷漆贴壁纸（绘制），如果要改房子，比如挪沙发，就得先把沙发挪走（旧布局）、再摆新位置（新布局）、最后补漆（重新绘制）。这个过程就是渲染管线，而我们说的JavaScript性能问题，大多出在“挪沙发”的环节。
1.1 渲染管线的四个核心步骤
这四个步骤是浏览器固定的流程，缺一不可：
样式计算：浏览器把HTML和CSS结合，算出每个元素的最终样式（比如颜色、大小、位置）。
布局（重排/回流）：算出每个元素在页面上的具体位置和尺寸，比如一个div宽多少、离左边多少距离。
绘制：把每个元素的样式（颜色、文字、图片）画到对应的位置，这一步不涉及位置和尺寸的变化。
合成：把绘制好的内容分层拼在一起，生成最终的页面。
这里有个关键：只要修改元素的位置或尺寸，就会触发“布局”，布局之后必须重新绘制，再重新合成；如果只是改颜色、背景，只会触发绘制和合成，不会触发布局——这也是优化的核心思路。
二、什么是布局抖动和重绘？
搞懂了渲染流程，再看两个最常见的卡顿元凶：布局抖动和重绘。先别被名字吓住，用装修的例子类比就懂。
2.1 布局抖动（重排抖动）：反复挪沙发
布局抖动的本质是反复触发布局计算，就像你先挪沙发，再改沙发的大小，再挪一次，再改大小，反复折腾，装修师傅得反复调整，效率极低。
举个具体的代码例子，我们用纯JavaScript（没有框架）来写，先看一段有问题的代码：
// 技术栈：纯JavaScript
// 错误写法：布局抖动的典型案例
const boxes = document.querySelectorAll('.box'); // 拿到所有box元素
// 遍历每个box，先读尺寸，再改尺寸
for (let i = 0; i < boxes.length; i++) {
// 第一步：读box的高度（触发浏览器布局计算，拿到最新的布局信息）
const height = boxes[i].offsetHeight;
// 第二步：改box的高度（触发浏览器重新布局）
boxes[i].style.height = height + 10 + 'px';
}
这段代码的问题在哪？我们一步步拆解：
第一次循环：读offsetHeight（触发布局，算出第一个box的高度），然后改高度（触发重新布局）；
第二次循环：再读offsetHeight（又触发一次布局，因为第一个box改了高度，整个页面的布局可能都变了，浏览器得重新算一遍所有元素的位置），然后改第二个box的高度（再触发布局）；
循环n次，就会触发n次布局，相当于每挪一次沙发，都要重新算整个房子的布局，效率极低，这就是布局抖动。
2.2 重绘：反复刷漆
重绘的本质是反复触发绘制步骤，就像你先刷红色的墙，再改成蓝色，再改成红色，反复刷漆，虽然不会改布局，但也会浪费时间。
重绘本身比布局抖动的代价小，但如果触发次数太多，也会卡顿。比如下面这段代码：
// 技术栈：纯JavaScript
// 错误写法：频繁重绘的案例
const box = document.querySelector('.box');
// 每隔10毫秒改一次背景色（触发重绘）
setInterval(() => {
const randomColor = `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`;
box.style.backgroundColor = randomColor;
}, 10);
这段代码每10毫秒就改一次背景色，每次改都会触发绘制步骤，虽然不会改布局，但频繁重绘也会让页面变卡，尤其是当页面元素很多的时候。
三、如何精准定位这两个问题？
知道了问题是什么，接下来是最关键的：怎么找到代码里的布局抖动和重绘？浏览器给我们提供了专门的工具，不用写复杂的脚本，直接用Chrome的开发者工具就能搞定。
3.1 定位布局抖动：用Performance面板
Performance面板是Chrome开发者工具里专门用来分析页面性能的工具，能帮我们看到每一步渲染的耗时。具体操作步骤：
打开Chrome，进入要分析的页面，按F12打开开发者工具；
切换到「Performance」面板，点击左上角的「录制」按钮（一个圆圈）；
操作页面，比如滚动、点击、触发动画，然后点击「停止」按钮；
录制完成后，会出现一个时间轴，找到「Layout」（布局）相关的条目，点击它就能看到布局的耗时和次数。
如果布局的耗时很长，或者次数很多，就说明有布局抖动。比如刚才的循环代码，录制后会看到Layout条目密密麻麻，每个条目都对应一次布局计算。
3.2 定位重绘：用Layers面板
Layers面板能帮我们看到页面的分层情况，以及哪些元素会触发重绘。具体操作步骤：
打开Chrome开发者工具，切换到「Layers」面板；
点击面板里的「Paint flashing」按钮（一个眼睛图标）；
操作页面，比如滚动、点击，浏览器会用绿色高亮显示正在重绘的区域。
如果绿色区域很大，或者频繁出现，就说明有频繁重绘的问题。比如刚才的定时改背景色的代码，操作后会看到box区域一直闪绿色，说明一直在重绘。
四、如何优化这两个问题？
找到问题后，怎么优化？我们针对布局抖动和重绘分别给出优化方案，还是用具体的代码例子说明。
4.1 优化布局抖动：先读再改
布局抖动的核心是“边读边改”，所以优化的思路是先把所有需要读的布局信息读完，再统一修改，这样只会触发一次布局。
还是刚才的循环代码，优化后的写法：
// 技术栈：纯JavaScript
// 优化写法：先读再改，避免布局抖动
const boxes = document.querySelectorAll('.box');
const heights = []; // 用来存储所有box的高度
// 第一步：先读所有box的高度（只触发一次布局）
for (let i = 0; i < boxes.length; i++) {
heights.push(boxes[i].offsetHeight);
}
// 第二步：再统一修改所有box的高度（只触发一次布局）
for (let i = 0; i < boxes.length; i++) {
boxes[i].style.height = heights[i] + 10 + 'px';
}
这段代码的优化点很明显：先把所有box的高度都读完，再统一修改高度，这样只会触发两次布局（第一次读的时候触发一次，第二次改的时候触发一次），比原来的n次布局效率高很多。
4.2 优化重绘：减少触发次数
重绘的优化思路是减少触发绘制的次数，或者让重绘的区域变小。比如刚才的定时改背景色的代码，我们可以改成每隔100毫秒改一次，而不是10毫秒，这样触发重绘的次数就减少了：
// 技术栈：纯JavaScript
// 优化写法：减少重绘触发次数
const box = document.querySelector('.box');
// 每隔100毫秒改一次背景色（减少重绘次数）
setInterval(() => {
const randomColor = `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`;
box.style.backgroundColor = randomColor;
}, 100);
另外，我们还可以用transform来做动画，因为transform不会触发布局和绘制，只会触发合成，效率更高。比如下面这段代码：
// 技术栈：纯JavaScript
// 优化写法：用transform做动画，避免重绘
const box = document.querySelector('.box');
let x = 0;
// 每隔10毫秒移动一次box（用transform，只触发合成）
setInterval(() => {
x += 1;
box.style.transform = `translateX(${x}px)`;
}, 10);
这段代码用transform移动box，不会触发布局和绘制，只会触发合成，所以效率比改left属性高很多，不会卡顿。
五、应用场景、优缺点和注意事项
5.1 应用场景
布局抖动和重绘的问题主要出现在以下场景：
页面有大量动画，比如滚动动画、轮播图、元素拖拽；
页面频繁更新内容，比如实时数据展示、聊天窗口；
页面有大量元素，比如表格、列表、图片墙；
用JavaScript操作DOM的场景，比如动态添加、修改元素。
5.2 技术优缺点
布局抖动优化的优缺点：
优点：能大幅减少布局的次数，提升页面性能，尤其是在有大量元素的页面；
缺点：需要开发者养成“先读再改”的习惯，对代码逻辑有一定要求，不能随便边读边改。
重绘优化的优缺点：
优点：能减少绘制的次数，提升页面的流畅度，对动画类的页面效果明显；
缺点：有些场景下不能用transform，比如需要改变元素的位置和尺寸，只能改left和top，这时候就需要结合其他优化方案。
5.3 注意事项
不要频繁操作DOM，尽量批量操作，比如用文档片段（DocumentFragment）来批量添加元素；
尽量用transform和opacity来做动画，因为这两个属性不会触发布局和绘制，只会触发合成；
尽量不要在循环里读取offsetHeight、offsetWidth、clientHeight、clientWidth等属性，这些属性会触发浏览器的布局计算；
定期用Performance和Layers面板分析页面性能，及时发现问题。
六、文章总结
布局抖动和重绘是浏览器渲染管线中最常见的JavaScript性能瓶颈，它们的本质是浏览器的渲染流程被反复触发，导致性能下降。要解决这两个问题，首先要搞懂浏览器的渲染流程，然后用Chrome的开发者工具精准定位问题，最后针对问题进行优化。
优化的核心思路是：减少布局和绘制的触发次数，尽量用合成来代替布局和绘制。同时，开发者要养成良好的编码习惯，比如先读再改、批量操作DOM、用transform做动画等。
最后，性能优化是一个持续的过程，需要定期分析页面性能，及时发现和解决问题，这样才能保证页面的流畅度，提升用户体验。