一文读懂回流(重排)重绘

回流与重绘

回流重绘是指在网页中进行布局、样式等操作时,浏览器需要重新计算元素的位置和大小(回流)以及重新绘制元素的样式(重绘)的过程。这个过程会消耗很多的计算资源,因此需要尽量减少回流和重绘的次数,以提高网页的性能。

回流和重绘的触发条件包括:

当页面布局和几何属性发生变化时,会触发回流和重绘,比如改变元素的位置、大小、边距、填充等。

当元素的样式发生变化时,会触发重绘,比如修改元素的颜色、背景、字体等。

回流何时发生:

1、当页面首次加载时,浏览器需要进行初始的回流和重绘来计算和显示页面的布局和样式。

2、当页面的 DOM 结构发生变化,比如增加、删除、移动元素,或者修改元素的样式、尺寸等,都可能引起回流。

3、当浏览器窗口大小发生变化时,需要重新计算元素的布局和位置来适应新的窗口大小。

重绘何时发生:

1、回流发生必定引发重绘

2、修改元素的样式,但不影响布局的情况,例如修改元素的颜色、背景色、文本样式等

3、添加或移除元素的类,但不会导致尺寸或位置的变化,会触发重绘但不引起回流。

为了减少回流和重绘的次数,可以采取以下措施:

1、使用 CSS3 的 transform 和 opacity 属性,它们不会触发回流和重绘,而是直接交给GPU处理可以实现一些动画效果。 transform、opacity、filter也是更新视图的第三种方式: 合成,也是常说的GPU加速,在合成的情况下,直接跳过布局和绘制的过程,进入 非主线程 处理部分,交给 合成线程 处理,充分发挥GPU优势,可以使用transform 替代 top

2、将需要频繁操作的样式变化合并在一起,然后一次性修改元素的样式,减少触发回流和重绘的次数。

3、动画实现的速度的选择,动画速度越快,回流次数越多,也可以选择使用requestAnimationFrame,其底层原理就是利用了第2点

4、尽量避免在循环中频繁修改元素的样式,可以先将元素的样式存储在变量中,然后一次性修改元素的样式。

5、使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局)

6、不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局

7、CSS 选择符从右往左匹配查找, 避免节点层级过多

8.将频繁重绘或者回流的节点设置为图层,图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说,浏览器会自动将该节点变为图层。 will-change: transform;

相关推荐
papership1 小时前
【入门级-C++程序设计:12、文件及基本读写-文件的基本概念&文本文件的基本操作】
开发语言·c++·青少年编程
SaleCoder2 小时前
用Python构建机器学习模型预测股票趋势:从数据到部署的实战指南
开发语言·python·机器学习·python股票预测·lstm股票模型·机器学习股票趋势
wkj0013 小时前
vue中 js-cookie 用法
前端·javascript·vue.js
GoldKey7 小时前
gcc 源码阅读---语法树
linux·前端·windows
玩代码7 小时前
备忘录设计模式
java·开发语言·设计模式·备忘录设计模式
Xf3n1an8 小时前
html语法
前端·html
张拭心8 小时前
亚马逊 AI IDE Kiro “狙击”Cursor?实测心得
前端·ai编程
漠月瑾-西安8 小时前
如何在 React + TypeScript 中实现 JSON 格式化功能
javascript·jst实现json格式化
技术猿188702783518 小时前
实现“micro 关键字搜索全覆盖商品”并通过 API 接口提供实时数据(一个方法)
开发语言·网络·python·深度学习·测试工具
烛阴8 小时前
为什么你的Python项目总是混乱?层级包构建全解析
前端·python