什么是重排重绘，如何避免

本文收录于 GitHub 日问: DailyQuestion^[1]，内含大厂内推机会、面经大全 及若干面试题，每天学习五分钟，一年进入大厂中。可在右下角打开原文查看

重排和重绘是关键渲染路径中的两步，可以参考另一个问题: 什么是关键渲染路径^[2]

• 重排(Reflow)：元素的位置发生变动时发生重排，也叫回流。此时在关键渲染路径中的 Layout 阶段，计算每一个元素在设备视口内的确切位置和大小。当一个元素位置发生变化时，其父元素及其后边的元素位置都可能发生变化，代价极高

• 重绘(Repaint): 元素的样式发生变动，但是位置没有改变。此时在关键渲染路径中的 Paint 阶段，将渲染树中的每个节点转换成屏幕上的实际像素，这一步通常称为绘制或栅格化

另外，重排必定会造成重绘。以下是避免过多重拍重绘的方法

1. 使用 DocumentFragment 进行 DOM 操作，不过现在原生操作很少也基本上用不到
2. CSS 样式尽量批量修改
3. 避免使用 table 布局
4. 为元素提前设置好高宽，不因多次渲染改变位置

更多面试

【头条】如何隐藏页面中的某个元素

【蚂蚁】当新入职一家公司时，如何快速搭建开发环境并让应用跑起来

【字节】如何实现选中复制的功能

【阿里】什么是防抖和节流，他们的应用场景有哪些

【头条】请简述一下 async 与 defer 的区别

【腾讯】如何实现一个 sample 函数，从数组中随机取一个元素

【淘宝】简述 http 的缓存机制

【蚂蚁】no-cache 与 no-store 的区别是什么

关注我

我是山月，正致力于每天用五分钟能够看完的简短答案回答一个大厂高频面试题。扫码添加我的微信，备注进群，加入高级前端进阶群.

参考资料

[1]

DailyQuestion: https://q.shanyue.tech

[2]

什么是关键渲染路径: https://q.shanyue.tech/fe/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/391.html