前端必看！重排和重绘别再搞混了🔥面试高频考点+避坑技巧

家人们谁懂啊！前端面试被问重排重绘，明明背过却答得磕磕绊绊😭 而且工作中不小心写多了重排代码，页面直接卡成PPT…今天就用最通俗的话，把重排、重绘讲明白，再附上避坑技巧，不管是面试还是实际开发都能用得上，建议收藏备用✅

先搞懂前提：浏览器渲染页面的完整流程（简单记这5步，不用死记硬背)
构建DOM树 → 构建CSSOM → 构建渲染树 → 布局渲染树 → 绘制渲染树
简单说：布局阶段算好每个元素的大小、位置（给元素定坐标），绘制阶段再把元素画到屏幕上。重排和重绘，就是这两个阶段出了“重复工作”！

一、重排（回流）：最费性能的“大动作”⚠️

一句话总结：元素的“身材”“位置”变了，浏览器得重新算布局、重新排元素，相当于把页面重新“摆一遍”。

比如你把一个div的宽度从100px改成200px，或者把它从左边移到右边，浏览器就得重新计算所有相关元素的位置和尺寸，这就是重排。

重点：重排一定会触发重绘（摆完位置总得重新画吧），而且开销极大，尤其是页面元素多的时候！

这些场景一定会触发重排（记牢，面试必问）：

页面第一次渲染（这是开销最大的一次重排，没法避免）
添加/删除可见的DOM元素（比如点击按钮加个div）
改变元素位置（比如用left/top移动，或者float、flex布局调整）
改变元素尺寸（边距、填充、边框、宽度、高度随便改一个）
改变元素内容（文字变多/变少、图片加载完成后尺寸变化）
改变字体大小（整个页面的文字布局都会变）
浏览器窗口 resize（比如拉大缩小浏览器）
激活CSS伪类（比如hover，有些hover会改变元素尺寸/位置）
查询某些属性/调用方法（重点坑！offsetWidth、offsetHeight、scrollTop这些，会强制刷新DOM队列，触发重排）

二、重绘：相对“轻量”的“小修改”✅

一句话总结：元素的“身材”“位置”没变，只是换了件“衣服”，浏览器只需要重新画这个元素，不用动整体布局。

比如给div改个颜色、换个背景图、改个字体样式，元素还是原来的大小和位置，这就是重绘。

重点：重绘不一定会触发重排，开销比重排小很多，但频繁重绘也会卡顿哦！

三、最关键！减少重排的实用技巧（核心：少折腾DOM）

面试必问+工作必用，直接上代码对比，一看就会！

技巧1：样式集中改变，别频繁操作style

反面例子（踩坑！）：


// bad 多次操作style，触发多次重排

var left = 10;

var top = 10;

el.style.left = left + "px";

el.style.top = top + "px";

正面例子（推荐！）：


// better 用cssText一次性修改

el.style.cssText += "; left: " + left + "px; top: " + top + "px;";



// 更优 直接加类名（推荐，更易维护）

el.className += " className";

技巧2：分离DOM读写操作，别穿插着来

坑点：DOM读操作（查属性）和写操作（改样式）穿插，会强制刷新队列，触发多次重排！

反面例子（踩坑！）：


// bad 强制刷新 触发四次重排+重绘

div.style.left = div.offsetLeft + 1 + 'px';

div.style.top = div.offsetTop + 1 + 'px';

div.style.width = div.offsetWidth + 1 + 'px';

div.style.height = div.offsetHeight + 1 + 'px';

正面例子（推荐！）：


// better 先读所有需要的属性，再一次性写操作

var left = div.offsetLeft;

var top = div.offsetTop;

var width = div.offsetWidth;

var height = div.offsetHeight;



div.style.left = left + 1 + 'px';

div.style.top = top + 1 + 'px';

div.style.width = width + 1 + 'px';

div.style.height = height + 1 + 'px';