深入理解重排(Reflow)与重绘(Repaint),写出高性能 CSS 动画
在前端开发中,CSS 动画是提升用户体验的重要手段,但很多开发者在使用动画时并不了解浏览器背后的渲染机制,导致动画卡顿甚至影响整体性能。本文将带你深入理解 CSS 中的两大核心概念 —— 重排(Reflow) 与 重绘(Repaint),并掌握如何编写高性能的 CSS 动画。
一、什么是 Reflow(重排)?
重排是指浏览器在渲染过程中,重新计算元素的几何结构(位置、大小、盒模型)的过程。
会触发 Reflow 的典型操作:
- 修改几何类属性:
width
、height
、margin
、padding
、border
- 位置属性:
top
、left
、bottom
、right
- 布局属性:
display
、position
、overflow
- DOM 操作:添加、删除、修改节点
- 读取某些属性(如
offsetTop
,scrollHeight
等)会强制触发 reflow
⚠️ 重排是浏览器渲染中最昂贵的操作之一,可能导致整个页面重新计算布局,开销巨大。
二、什么是 Repaint(重绘)?
重绘是指元素样式发生改变(如颜色、透明度、阴影等)而不影响布局的情况下,浏览器重新将像素绘制到屏幕的过程。
会触发 Repaint 的典型属性:
color
background
box-shadow
visibility
border-color
opacity
(仅重绘,不重排)
Repaint 相比 Reflow 成本较低,但在短时间内大量触发仍会影响性能。
三、最推荐的动画属性:Composite-only 属性
有一类动画属性不会触发 Reflow 或 Repaint,而是直接由 GPU 图层合成完成,性能极佳:
✅ 推荐动画属性:
transform
✅opacity
✅filter
(部分浏览器可能仍会 repaint)
推荐写法:
.box {will-change: transform, opacity;transition: transform 0.3s ease, opacity 0.2s ease;
}
四、常见动画属性性能比较
属性名 | 会触发 | 性能建议 |
---|---|---|
transform | Composite | ✅ 推荐 |
opacity | Composite | ✅ 推荐 |
left/top 等定位属性 | Reflow+Repaint | ❌ 慎用 |
width/height | Reflow+Repaint | ❌ 慎用 |
background-color | Repaint | ⚠️ 一般 |
box-shadow | Repaint | ⚠️ 一般 |
五、不要滥用 transition: all
虽然 transition: all 0.3s ease;
写起来简单,但它有以下几个问题:
- 性能差:会监听所有可动画属性
- 不可控:有些属性其实不能动画(比如
display
),容易产生混乱 - 调试难:不清楚到底哪些属性在执行动画
✅ 推荐写法:
transition: transform 0.3s ease, opacity 0.2s ease;
六、实战建议总结
- ✅ 动画尽量只使用
transform
和opacity
- ✅ 使用
will-change
提前告诉浏览器优化这些属性 - ❌ 避免
left/top/width/height
动画,改用transform: translate()
或scale()
替代 - ❌ 不要使用
transition: all
通过理解 Reflow 与 Repaint 的工作机制,我们可以编写出更高效、更流畅的 CSS 动画,提升用户体验的同时,降低性能消耗。如果你在动画性能上遇到具体问题,也欢迎留言或继续交流!
相关文章:
深入理解重排(Reflow)与重绘(Repaint),写出高性能 CSS 动画
在前端开发中,CSS 动画是提升用户体验的重要手段,但很多开发者在使用动画时并不了解浏览器背后的渲染机制,导致动画卡顿甚至影响整体性能。本文将带你深入理解 CSS 中的两大核心概念 —— 重排(Reflow) 与 重绘&#x…...
Elasticsearch 从入门到实战:文档聚合操作及总结
四、文档操作:数据的增删改查 4.1 添加文档 文档(Document)是索引中的最小数据单元,使用 POST 或 PUT 添加: json POST /products/_doc/1 { "name": "华为Mate50 Pro", "price": 6…...
前缀和和差分笔记
前缀和和差分笔记 一维前缀和 示意图如下: 代码: **核心公式:sum[i]sum[i-1]a[i];(计算前缀和的)**#include<bits/stdc.h> using namespace std; const int N10000; #define ll long long int a[N],sum[N]; i…...
SSRF漏洞利用的小点总结和实战演练
含义理解: SSRF(Server-Side Request Forgery,服务器请求伪造)是一种由攻击者构造请求,由服务端发起请求的安全漏洞,一般情况下,SSRF攻击的目标是外网无法访问的内网系统。 攻击者通过篡改URL…...
IAR推动嵌入式开发:云就绪、可扩展的CI/CD和可持续自动化
全球领先的嵌入式系统开发软件解决方案供应商IAR正式发布全新云就绪平台,为嵌入式开发团队提供企业级的可扩展性、安全性和自动化能力。该平台于在德国纽伦堡举办的embedded world 2025展会上正式亮相,标志着将现代DevSecOps工作流集成到嵌入式软件开发中…...
瓦片数据合并方法
影像数据 假如有两份影像数据 1.全球底层影像0-5级别如下: 2.局部高清影像数据级别9-14如下: 合并方法 将9-14文件夹复制到全球底层0-5的目录下 如下: 然后合并xml文件 使得Tileset设置到最高级(包含所有级别)&…...
RISC-V AIA学习---IPI 处理器间中断
对于有多个hart的机器,必须为每个 hart 提供一个由具体实现定义的内存地址。向这个地址写入数据,就能向该 hart 发送一个机器级软件中断(主代码为 3)。换句话说,机器级的 IPI 可以通过这种方式,以机器级软件…...
Automattic 裁员16%,Matt Mullenweg称此举旨在提升盈利能力并增强投资实力
2025年4月3日,Automattic——这家以 WordPress.com、Tumblr 和 WooCommerce 等产品闻名的公司,宣布裁减其全球员工队伍的16%。这一决定是在周三通过公司博客文章和 Slack 内部消息向员工透露的。根据裁员前 Automattic 官网显示的员工人数(1,…...
图解AUTOSAR_SWS_FlexRayInterface
AUTOSAR FlexRay Interface 模块分析 本文档基于AUTOSAR SWS FlexRayInterface规范,对FlexRay Interface模块进行详细分析。 1. FlexRay Interface 模块架构 1.1 模块架构概览 1.2 架构说明 FlexRay Interface模块是AUTOSAR中的ECU抽象层组件,为上层模块提供统一的抽象接…...
AI赋能ArcGIS Pro——水系网络AI智能提取 | GIS人工智能制图技术解析
我们之前做了做了几期的AIGIS的分享。我们今天要再次做一个分享。 AI赋能ArcGIS Pro——水系网络智能提取全解析 DeepSeek结合ArcGIS Pro制作一个批量建库的脚本工具(代码一字未改,直接运行) 看老外如何玩DeepSeek!15分钟快速创…...
STM32江科大----IIC
声明:本人跟随b站江科大学习,本文章是观看完视频后的一些个人总结和经验分享,也同时为了方便日后的复习,如果有错误请各位大佬指出,如果对你有帮助可以点个赞小小鼓励一下,本文章建议配合原视频使用❤️ 如…...
RAG(检索增强生成)系统,提示词(Prompt)表现测试(数据说话)
在RAG(检索增强生成)系统中,评价提示词(Prompt)设计是否优秀,必须通过量化测试数据来验证,而非主观判断。以下是系统化的评估方法、测试指标和具体实现方案: 一、提示词优秀的核心标准 优秀的提示词应显著提升以下指标: 维度量化指标测试方法事实一致性Faithfulness …...
【leetcode hot 100 763】划分字母区间
解法一:用map记录<字母,字母出现的次数>,循环取出value-1,每次判断已经取出的字母(Set记录)是否还在后面存在(value>1),若存在继续循环,若不存在开启…...
PCB工艺:现代电子产品的核心制造技术
引言 PCB(Printed Circuit Board,印刷电路板)是电子设备的核心组成部分,几乎所有现代电子产品,从智能手机到航天设备,都依赖于PCB实现电路连接。PCB制造工艺的进步直接影响电子产品的性能、可靠性和成本。…...
【UE5 C++课程系列笔记】34——结构体与Json的相互转化
目录 准备工作 一、结构体转Json 二、Json转结构体 三、复杂结构体与Json的转换 主要通过借助FJsonObjectConverter类实现结构体和 JSON 之间的相互转换。 准备工作 首先新建一个结构体如下 添加两个方法分别用于将Struct转为Json、Json转为Struct 一、结构体转Json FStri…...
2025最新系统 Git 教程(二)
第2章 Git基础 2.1 Git 基础 - 获取 Git 仓库 如果你只想通过阅读一章来学习 Git,那么本章将是你的不二选择。 本章涵盖了你在使用 Git 完成各种工作时将会用到的各种基本命令。 在学习完本章之后,你应该能够配置并初始化一个仓库(reposito…...
力扣hot100_动态规划
动态规划 hot100_198. 打家劫舍 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。…...
玄机-第六章-哥斯拉4.0流量分析的测试报告
目录 一、测试环境 二、测试目的 三、操作过程 Flag1 Flag2 Flag3 Flag4 Flag5 Flag6 Flag7 Flag8 Flag9 Flag10 Flag11 Flag12 Flag13 pam_unix.so关键代码 四、结论 一、测试环境 靶场介绍:国内厂商设置的玄机靶场,以应急响应题目著…...
【Hadoop入门】Hadoop生态圈概述:核心组件与应用场景概述
1 Hadoop生态圈概述 Hadoop生态圈是以 HDFS(分布式存储) 和 YARN(资源调度) 为核心,围绕大数据存储、计算、管理、分析等需求发展出的一系列开源工具集合。 核心特点: 模块化:各组件专注解决特定…...
深度学习实战电力设备缺陷检测
本文采用YOLOv11作为核心算法框架,结合PyQt5构建用户界面,使用Python3进行开发。YOLOv11以其高效的实时检测能力,在多个目标检测任务中展现出卓越性能。本研究针对电力设备缺陷数据集进行训练和优化,该数据集包含丰富的电力设备缺…...
随机产生4位随机码(java)
Random类: 用于生成随机数 import java.util.Random; 导入必要的类 generateVerificationCode()方法: 这是一个静态方法,可以直接通过类名调用 返回一个6位数字的字符串,首位不为0 生成首位数字: random.nextInt…...
音视频入门基础:RTCP专题(4)——RTCP协议简介(下)
本文接着《音视频入门基础:RTCP专题(3)——RTCP协议简介(中)》,继续对RTCP协议进行简介。本文的一级标题从“十四”开始。 十四、SDES: Source Description RTCP Packet 本段内容对应《RFC 3550》的第6.5节…...
PyCharm2024.3.5专业版解决Conda executable is not found问题
项目场景: pycharm使用anaconda 内的虚拟环境 pycharm 2024.3.5 专业版 C:\Users\Administrator>conda infoactive environment : transmute_recipe_generatoractive env location : D:\anaconda3\envs\transmute_recipe_generatorshell level : 1user config…...
滑动窗口思想 面试算法高频题
基本思想 滑动窗口思想其实就是快慢型的特例 计算机网络中滑动窗口协议(Sliding Window Protocol),该协议是TCP实现流量控制等的核心策略之一。事实上在与流量控制、熔断、限流、超时等场景下都会首先从滑动窗口的角度来思考问题࿰…...
Linux中特殊的变量
1.$# 含义:表示传入脚本或函数的参数数量。 用法:用于检查用户是否提供了足够的参数。 示例: #!/bin/bash echo "参数数量: $#"2.$? 含义:表示上一条命令的退出状态。如果命令成功执行,值为 0;…...
Linux文件系统与日志分析
目录 一.日志 1.1日志的定义 1.2日志的功能 1.3日志的分类 1.4日志的文件格式 1.5用户日志 1.6一些常见的日志 1.7日志消息的级别 二.系统日志管理 rsyslog 2.1rsyslog的定义 2.2rsyslog 配置文件 2.3rsyslog的实际应用----单独显示某一服务的日志 1.编辑rsyslog配…...
从传统物流到智能调度的全链路升级
一、TMS系统升级的核心目标与整体框架 (一)为什么要升级?传统物流管理的三大痛点 调度效率低下:过去依赖人工分单、手动匹配承运商,订单量大时容易出错,比如不同区域的订单混排导致运输路线绕路ÿ…...
UE5中如何修复后处理动画蓝图带来的自然状态下的metablriger身体绑定形变(如耸肩)问题
【[metablriger] UE5中如何修复后处理动画蓝图带来的自然状态下的metablriger身体绑定形变(如耸肩)问题】 UE5中如何修复后处理动画蓝图带来的自然状态下的metablriger身体绑定形变(如耸肩)问题...
STL_vector_01_基本用法
👋 Hi, I’m liubo👀 I’m interested in harmony🌱 I’m currently learning harmony💞️ I’m looking to collaborate on …📫 How to reach me …📇 sssssdsdsdsdsdsdasd🎃 dsdsdsdsdsddfsg…...
css2学习总结之尚品汇静态页面
css2总结之尚品汇 一、布局 在 PC 端网页中,一般都会有一个固定宽度且水平居中的盒子,来显示网页的主要内容,这是网页 的版心。 版心的宽度一般是 960 ~ 1200 像素之间。 版心可以是一个,也可以是多个。 二、布局相关名词 我…...
Lua 第5部分 表
表( Table )是 Lua 语言中最主要(事实上也是唯一的)和强大的数据结构。 使用表,Lua语言可以以一种简单、统一且高效的方式表示数组、集合、记录和其他很多数据结构。 Lua语言也使用表来表示包( package &am…...
01分数规划
https://ac.nowcoder.com/acm/contest/22353/1011 并不需要高级数据结构,对答案二分即可。 假定当前二分的答案为 x x x,则 ∑ v i ∑ w i ≥ x \frac{ \sum_{v_i} }{\sum_{w_i}} ≥ x ∑wi∑vi≥x 成立时 x x x 才可能是最后的答案。 化简式…...
无人机动力系统全维度解析:技术演进、选型策略与未来趋势
一、动力系统技术理念与设计逻辑 (一)核心技术指标 能量密度:决定续航能力的关键参数,单位为 Wh/kg。当前主流锂聚合物电池能量密度约 250-300Wh/kg,氢燃料电池可达 500-800Wh/kg,航空燃油则高达 12,000W…...
重新审视中国的GB标准(44495 – 44497)
此前,我们深入探讨了中国新推出的智能互联汽车(ICV)网络安全标准GB Standard 44495-2024。我们探讨了该标准对汽车制造商的影响、与UNECE R155和ISO/SAE 21434等全球标准的一致性,以及该标准对未来汽车网络安全的意义。 然而,GB 44495-2024并…...
Linux进程控制(五)之做一个简易的shell
文章目录 做一个简易的shell预备知识代码实现运行结果 做一个简易的shell 重谈Shell shell是操作系统的一层外壳程序,帮我们用户执行指令, 获取到指令后,交给操作系统,操作系统执行完后,把执行结果通过shell交给用户…...
Apache Kafka全栈技术解析
目录 第一章 Kafka概述与核心价值 1.1 消息队列的演进与Kafka的诞生 1.2 Kafka的核心应用场景 1.3 Kafka生态全景图 第二章 Kafka核心概念与架构解析 2.1 核心概念深度剖析 2.2 Kafka架构设计精要 第三章 Kafka环境搭建与配置 3.1 单机部署实战 3.2 集群部署最佳实践 …...
结合 Flink/Spark 进行 AI 大数据处理(实时数据 + AI 推理的应用场景)
随着企业对实时智能决策的需求日益增强,将 Flink / Spark 等流批计算框架 与 大模型推理能力相结合,正在成为 AI 工业化落地的重要实践路径。本篇文章将深入介绍如何将 AI 模型集成到大数据流处理系统中,实现实时感知、智能判断与自动反馈。 1. 为什么需要“实时数据 + AI 推…...
开发PDF时,如何比较 PDF 文件
在 PDF 论坛上,“如何比较 PDF 文件”是一个经常被提到的问题。在开始之前,重要的是要明确你想要比较的内容是什么。 不同的 PDF 文件可能看起来一样吗? 是的,可能。不同的 PDF 创建工具可能会生成在视觉上完全相同的页面&#x…...
自动提取pdf公式 ➕ 输出 LaTeX
# 创建打包脚本的主内容 script_content """ from doc2x.extract_formula import extract_formula_imgs from pix2text import Pix2Text from PIL import Image import osdef main():pdf_path "your_file.pdf" # 将你的PDF命名为 your_file.pdf 并…...
abaqus二次开发python程序集
abaqus二次开发python程序集 1、设置字体背景色等2、读取模态频率并写入 csv 文件3、在两个窗口快速对比各价模态 1、设置字体背景色等 # _*_ coding:UTF-8 _*_from abaqusConstants import* def fontsize(sessionNone):#设置字体session.viewports[Viewport: 1].viewportAnno…...
高级java每日一道面试题-2025年3月23日-微服务篇[Nacos篇]-如何使用Nacos进行服务发现?
如果有遗漏,评论区告诉我进行补充 面试官: 如何使用Nacos进行服务发现? 我回答: 在Java高级面试中讨论如何使用Nacos进行服务发现时,可以从多个角度深入探讨,包括基本概念、配置步骤、代码示例以及高级特性。以下是综合了多种信息的详细回…...
k8s核心资源对象一(入门到精通)
本文将深入探讨Kubernetes中的核心资源对象,包括Pod、Deployment、Service、Ingress、ConfigMap和Secret,详细解析其概念、功能以及实际应用场景,帮助读者全面掌握这些关键组件的使用方法。 一、pod 1 pod概念 k8s最小调度单元,…...
了解 DeepSeek R1
了解DeepSeek R1 R1探索纯强化学习是否可以在没有监督微调的情况下学会推理的能力。 ‘Aha’ Moment 这种现象有点类似于人类在解决问题时突然意识到的方式,以下是它的工作原理: 初始尝试:模型对解决问题进行初始尝试识别:识别…...
【C语言】大小端字节序和字节序判断
前言: 在上章介绍了整形在内存的储存,了解了原码,反码,补码,知道了整数在内存的储存一般是补码,解决了负数相加的问题。 那么在本章为大家讲解一下大小端字节序。 一那字节序是什么呢? 字节…...
DrissionPage移动端自动化:从H5到原生App的跨界测试
一、移动端自动化测试的挑战与机遇 移动端测试面临多维度挑战: 设备碎片化:Android/iOS版本、屏幕分辨率差异 混合应用架构:H5页面与原生组件的深度耦合 交互复杂性:多点触控、手势操作、传感器模拟 性能监控:内存…...
ARM 汇编启动代码详解:从中断向量表到中断处理
ARM 汇编启动代码详解:从中断向量表到中断处理 引言 在嵌入式系统开发中,ARM 处理器(如 Cortex-A 系列)的启动代码是系统初始化和运行的基础。启动代码通常包括中断向量表的创建、初始化硬件状态(如关闭缓存和 MMU&a…...
笔试专题(七)
文章目录 乒乓球筐(哈希)题解代码 组队竞赛题解代码 删除相邻数字的最大分数(线性dp)题解代码 乒乓球筐(哈希) 题目链接 题解 1. 两个哈希表 先统计第一个字符串中的字符个数,再统计第二个字…...
React基础知识(一)
文章目录 概念特点React基本使用hello_react案例虚拟DOM的两种创建方式使用jsx创建使用js创建 虚拟DOM和真实DOM React jsxXMLjsx语法规则作用基本语法规则js语句和js代码babel.js作用 模块与组件模块组件 React面向组件编程函数式组件类组件 概念 react是一个将数据渲染为Htm…...
红黑树(Red-Black Tree)核心知识点与面试高频问题
红黑树(Red-Black Tree)核心知识点与面试高频问题 一、红黑树的核心性质 红黑树是一种自平衡的二叉搜索树,通过以下规则确保平衡性: 节点颜色:每个节点是红色或黑色。 根节点:根必须是黑色。 叶子节点&a…...
SpringBoot整合SSM
一、SpringBoot整合SSM SpringBoot整合SpringSpringBoot整合SpringMVCSpringBoot整合MyBatis(主要) 步骤一:创建SpringBoot工程,添加druid依赖 <!-- todo 1 添加druid连接池依赖--> <dependency><groupId>co…...