动画的优化:为什么transform 比 margin的性能好?

原创 已于 2022-03-17 13:12:17 修改 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#动画 #css3 #前端

于 2022-03-17 13:10:12 首次发布
本文探讨了CSS布局属性margin和合成属性transform在动画表现上的差异。margin变化导致页面重排，影响性能，而transform通过创建独立复合层实现高效动画，避免重绘。理解这些原理有助于优化网页动画性能。

1.margin是属于布局属性，该属性的变化会导致页面的重排。 对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到GPU中进行渲染

2.transform是合成属性，浏览器会为元素创建一个独立的复合层，当元素内容没有发生变化，该层不会被重绘，通过重新复合来创建动画

前端阿玉
关注
CSS动画性能优化：避免重绘和回流
weixin_41455464的博客
06-30 193
想象一下，你在一家餐厅当服务员。
CSS进阶-第二十九篇：CSS 性能优化与最佳实践-性能优化（三）：动画性能优化
无
04-12 80
在前端开发中，CSS 动画为页面增添了丰富的交互性和视觉效果。然而，如果使用不当，动画可能会引发性能问题，导致页面卡顿、响应迟缓，严重影响用户体验。接下来，我们将深入探讨 CSS 动画性能问题的成因，并介绍有效的优化方法。
为什么transform动画性能更优的根本原因
YUSIR 完美CODING世界
01-02 825
而修改dom的几何信息例如height，动画中的left移动等，动画中每一帧都对布局有影响从而浏览器会重新计算生成布局树再分层，生成绘制指令再分块，再光栅化，然后交给GPU重新渲染。但是Transform则不会影响，浏览器只需要一次生成这个元素的位图，并在动画开始的时候将它提交给GPU去处理。之后，浏览器不需要再做任何布局、 绘制以及提交位图的操作。ball1的动画使用transform左移100px， ball2的动画使用left左移100px。
unity3d 提高this.transform的效率
进击的Unity3d
11-12 2858
正常来说，大部分同学一般get transform都直接gameobject.transform使用。但往往，你会发现有些人会将transform引用保存起来，例如： private Transform myTransform; void Awake() {     myTransform = transform; } 然后使用myTransf
浏览器渲染原理-解释回流重绘以及为什么transform效率高
g841805的博客
04-15 1095
reflow 的本质就是重新计算 layout 树(修改了几何信息)。需要重新计算布局树，会引发 layout。当进行了会影响布局树的操作后，为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息，浏览器在反复权衡下，最终决定获取属性立即 reflow。
6. 为什么 transform 效率高
weixin_64684095的博客
07-18 322
transform 在合成线程的 draw 中transform在合成线程的 draw 阶段执行，不阻塞主线程。利用 GPU 加速，提升渲染性能。不触发重排，仅需重绘或直接在合成阶段完成更新。是实现高性能动画和交互的理想选择。
居中为什么用transform，而不是margin top/left
callmeCassie的博客
04-27 4607
首先。我们了解下transform是干嘛的。在MDN中的官方解释：CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。简言之，transform可以操作一些动画、位移效果。margin top/left，我们应该很熟悉，用得比较多。那为什么说，居中显示，CSS3标准的transform更胜一筹呢？我们主要还是从浏览器渲染的性能方面考...
CSS3 动画卡顿性能优化的完美解决方案
10-17
在处理CSS3动画时，开发者常常会遇到动画卡顿的问题，这对用户体验会产生极大的负面影响。...总之，通过使用合理的CSS3属性和动画优化技巧，可以有效改善动画性能，提供更加流畅和舒适的用户体验。
前端动画性能优化：CSS、Canvas与WebGL的适用场景
2509_93420923的博客
09-17 376
根据Google的Core Web Vitals指标，页面动画超过16.6ms的渲染间隔就会导致视觉卡顿，而60fps的流畅度要求将单帧渲染时间压缩至16ms以内312。面对这一挑战，开发者需根据场景特性选择合适的技术栈：CSS动画凭借硬件加速优势适合简单过渡效果，Canvas以像素级操控胜任2D复杂动画，而WebGL则通过GPU加速成为3D渲染的首选25。其基于OpenGL ES规范的底层架构，可直接调用显卡资源完成顶点着色、光栅化等操作，在复杂场景中展现压倒性优势58。
HarmonyOS 5 动画性能优化深度解析：从原理到实践
最新发布
猫林老师 - 致力优质教程编写
09-24 2599
选接口：优先用系统动画接口，避免自定义帧计算改变换：用transform替代布局属性修改，减少重排合并算：同参数动画合并到一个animateTo，统一状态更新巧缓存：大量动效组件启用，复用绘制结果。
面试资料积累css-居中为什么使用transform ,而不使用marginLeft
weixin_38687522的博客
04-25 583
因为transfrom是独立的层，而margin会导致重绘和回流 transform:是通过创建一个renderLayers(渲染)合成层，拥有独立的graphicsLayers(绘图层)。每一个绘图层都有一个绘图区域，其对应的渲染会绘制进绘图区域，合成器（compositor）最终会负责将由绘图区域输出的位图合并成最终屏幕展示图案。 解释一下什么样的条件是独立的合成层。 1.3D或者perspective transform的css属性层 2. video元素的层 3.canvas元素的层 4. f
移动元素时，translate要比margin好
weixin_30556161的博客
05-04 466
比如 做全屏轮播时，父元素往往是被子元素撑起来的，那你设置父元素的margin时，往往会感染到子元素，如下图： 而用translate3d就不会出现这种效果： 转载于:https://www.cnblogs.com/web-fusheng/p/6810219.html...
transform:translate(-50%,-50%)与margin-top:-(width/2),margin-left:-(height/2)对比
weixin_46032763的博客
08-10 551
要想使盒子相对于页面可视区域水平垂直居中两种方法对比： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&g
margin，padding，top，left，transform：translate（10%，10%）等使用百分比的时候参造物的问题
liuboman的博客
03-25 2487
1.margin，padding 使用百分比时候参照物的问题 （1）父元素直接规定了宽度，高度。   #right { width: 600px; height: 300px; position: absolute; top:0; left:0; background-color: aqua;...
javascript: 元素水平居中垂直居中 采用 margin 负值 和 transform 的区别
weixin_44868492的博客
09-05 475
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
Css属性transform详解（变形、旋转、缩放）
热门推荐
宝子的博客
05-17 1万+
1.变形就是指通过css来改变元素的形状或位置 2.变形不会影响到页面的布局(不会脱离文档流) 3.平移元素，百分比是相对于自身计算的1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度(transform)
前端性能优化-CSS的性能优化：--transform与position的区别、硬件加速工作原理及注意事项
thewar196的博客
05-06 3515
前端性能优化 CSS的性能优化： transform与position的区别 硬件加速工作原理及注意事项
CSS居中的常用方式以及优缺点
XZSJ_Front的博客
10-14 611
前言 居中是页面开发中经常遇到的问题。 使用合适的、简单的、兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题。 text-align:center 来看这个例子，一张图片和文字进行居中。如下图所示： img与文字内容都是行内元素，因此直接使用text-align就行了。代码如下图所示： 在最外层的div中使用text-align：center的问题是，会导致所有的子元素都会继承这个属性。如果还有一段文字用作介绍该图片的作用时，这段文字也会被居中。 而我们希望这段文字是左对齐的，就不得不单独设
复习一下transform
weixin_42274863的博客
03-19 551
transform matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。 translateX(x) 定义转换，只是用 X...
如何优化CSS动画以减少性能消耗？
06-11
嗯，用户正在寻找优化CSS动画性能的方法和技巧，我可以基于提供的引用信息来构建回答。引用[1]强调理解动画渲染原理的重要性，引用[2]提到控制重绘和重排是关键，引用[3]则特别指出某些CSS属性具有独立的合成层。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值