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

2024-03-13 21:20

本文主要是介绍一文读懂回流(重排)重绘,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

回流与重绘

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

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

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

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

回流何时发生:

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;

这篇关于一文读懂回流(重排)重绘的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/806240

相关文章

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

一文详解如何从零构建Spring Boot Starter并实现整合

《一文详解如何从零构建SpringBootStarter并实现整合》SpringBoot是一个开源的Java基础框架,用于创建独立、生产级的基于Spring框架的应用程序,:本文主要介绍如何从... 目录一、Spring Boot Starter的核心价值二、Starter项目创建全流程2.1 项目初始化(

一文带你了解SpringBoot中启动参数的各种用法

《一文带你了解SpringBoot中启动参数的各种用法》在使用SpringBoot开发应用时,我们通常需要根据不同的环境或特定需求调整启动参数,那么,SpringBoot提供了哪些方式来配置这些启动参... 目录一、启动参数的常见传递方式二、通过命令行参数传递启动参数三、使用 application.pro

一文带你深入了解Python中的GeneratorExit异常处理

《一文带你深入了解Python中的GeneratorExit异常处理》GeneratorExit是Python内置的异常,当生成器或协程被强制关闭时,Python解释器会向其发送这个异常,下面我们来看... 目录GeneratorExit:协程世界的死亡通知书什么是GeneratorExit实际中的问题案例

一文详解SQL Server如何跟踪自动统计信息更新

《一文详解SQLServer如何跟踪自动统计信息更新》SQLServer数据库中,我们都清楚统计信息对于优化器来说非常重要,所以本文就来和大家简单聊一聊SQLServer如何跟踪自动统计信息更新吧... SQL Server数据库中,我们都清楚统计信息对于优化器来说非常重要。一般情况下,我们会开启"自动更新

一文详解kafka开启kerberos认证的完整步骤

《一文详解kafka开启kerberos认证的完整步骤》这篇文章主要为大家详细介绍了kafka开启kerberos认证的完整步骤,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、kerberos安装部署二、准备机器三、Kerberos Server 安装1、配置krb5.con

一文详解Nginx的强缓存和协商缓存

《一文详解Nginx的强缓存和协商缓存》这篇文章主要为大家详细介绍了Nginx中强缓存和协商缓存的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、强缓存(Strong Cache)1. 定义2. 响应头3. Nginx 配置示例4. 行为5. 适用场景二、协商缓存(协

一文详解如何在Python中使用Requests库

《一文详解如何在Python中使用Requests库》:本文主要介绍如何在Python中使用Requests库的相关资料,Requests库是Python中常用的第三方库,用于简化HTTP请求的发... 目录前言1. 安装Requests库2. 发起GET请求3. 发送带有查询参数的GET请求4. 发起PO

一文详解Java Condition的await和signal等待通知机制

《一文详解JavaCondition的await和signal等待通知机制》这篇文章主要为大家详细介绍了JavaCondition的await和signal等待通知机制的相关知识,文中的示例代码讲... 目录1. Condition的核心方法2. 使用场景与优势3. 使用流程与规范基本模板生产者-消费者示例

电脑密码怎么设置? 一文读懂电脑密码的详细指南

《电脑密码怎么设置?一文读懂电脑密码的详细指南》为了保护个人隐私和数据安全,设置电脑密码显得尤为重要,那么,如何在电脑上设置密码呢?详细请看下文介绍... 设置电脑密码是保护个人隐私、数据安全以及系统安全的重要措施,下面以Windows 11系统为例,跟大家分享一下设置电脑密码的具体办php法。Windo