字节前端提前批面试题：触发了几次回流几次重绘，2024年最新作为一名Web前端面试者你应该知道的

div.style.left = ‘10px’;

console.log(div.offsetLeft);

div.style.top = ‘10px’;

console.log(div.offsetTop);

div.style.width = ‘20px’;

console.log(div.offsetWidth);

div.style.height = ‘20px’;

console.log(div.offsetHeight);

还是1次重排吗？

Obviously not! 此时发生了4次重排！

上文不是说浏览器有渲染队列优化机制吗？ 为什么会有4次？

这和offsetLeft/Top/Width/Height有关

offsetTop、offsetLeft、offsetWidth、offsetHeight

clientTop、clientLeft、clientWidth、clientHeight

scrollTop、scrollLeft、scrollWidth、scrollHeight

getComputedStyle()（IE中currentStyle）

这些会强制刷新队列要求样式修改任务立刻执行

因为浏览器并不确定在下面的代码中是否还有修改同样的样式，为了获取到当前正确的的即时值不得不立刻执行渲染队列触发重排！！！

四.重绘与重排性能优化

---

1.分离读写操作

我们就可以对上面的代码进行优化

div.style.left = ‘10px’;