一文弄懂浏览器的重排(回流)与重绘

最新推荐文章于 2024-04-25 09:21:25 发布

小小小菜鱼

最新推荐文章于 2024-04-25 09:21:25 发布

阅读量907

点赞数 27

分类专栏：浏览器及前端其他文章标签：前端 html css

本文链接：https://blog.csdn.net/cherry__yu/article/details/136887414

版权

浏览器及前端其他专栏收录该内容

5 篇文章 0 订阅

订阅专栏

浏览器渲染过程

在这里插入图片描述

在浏览器从服务器下载到资源后

解析 HTML 形成 DOM 树，解析 CSS 形成 CSSOM 树。
渲染树：将 DOM 树和 CSSOM 树结合创建 render 树。
Layout：根据渲染树进行布局，得到节点的几何信息（位置大小）。
Painting：布局完成后浏览器根据结果和渲染树，将具体的像素绘制出来。

重排或回流 Repainting 就是重新执行 Layout 的过程；
重绘 Repaint 是重新执行 Painting。
根据流程图可见回流必将引起重绘，重绘不一定引起回流。

回流和重绘

回流/重排 (Reflow)：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。
何时回流：添加、删除可见的dom，元素的位置改变，元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)，页面渲染初始化，浏览器窗口尺寸改变

重绘 (Repaint)：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
何时仅重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility 等）。

浏览器的优化机制

现代浏览器会对频繁的回流和重绘操作进行优化。浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。
当你获取布局信息的操作的时候，会强制队列刷新。访问以下属性时：clientWidth、clientHeight、clientTop、clientLeft、offsetWidth、offsetHeight、offsetTop、offsetLeft、scrollWidth、scrollHeight、scrollTop、scrollLeftwidth、heightgetComputedStyle()、getBoundingClientRect()

如何避免回流和重绘

合并样式修改：
减少造成回流的次数，如果要给一个节点操作多个css属性，而每一个都会造成回流的话，尽量将多次操作合并成一个，例如将这几个样式定义给一个类名，然后给标签添加类名。
批量操作DOM:
情景：给ul中依次新增一个li的操作，每次都会触发回流。
隐藏元素：ul.style.display = ‘none’ -> 隐藏ul后，给ul添加节点，添加完成后再将ul显示。
创建文档碎片：fragment = document.createDocumentFragment() -> 将所有li先放在文档碎片中，等都放进去以后，再将文档碎片放在ul中。
避免使用table布局：由于浏览器使用流式布局，对RenderTree的计算通常只要遍历一次就可以完成，但table及其内部元素除外，他们需要多次计算。
尽可能在DOM树的最末端改变class等。

参考：
https://juejin.cn/post/6844903779700047885
https://juejin.cn/post/6844903569087266823。
https://www.zhihu.com/tardis/bd/art/342371522