移动端动画使用transform提升性能

在移动端做动画，对性能要求较高
而通常的改变margin属性是性能极低的，即使使用绝对定位改变top,left这些属性性能也很差
因此应该使用transform来进行动画效果，如transform:translateX(100px)

原理：

首先，浏览器绘制 DOM 的过程是这样子的：

获取 DOM 并将其分割为多个层（layer）

将每个层独立地绘制进位图（bitmap）中

将层作为纹理（texture）上传至 GPU

复合（composite）多个层来生成最终的屏幕图像。

left/top/margin 之类的属性会影响到元素在文档中的布局，当对布局（layout）进行动画时，该元素的布局改变可能会影响到其他元素在文档中的位置，就导致了所有被影响到的元素都要进行重新布局，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的性能开销。

transform 属于合成属性（composite property），对合成属性进行 transition/animation 动画将会创建一个合成层（composite layer），这使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理（texture）上传到 GPU，只要该层的内容不发生改变，就没必要进行重绘（repaint），浏览器会通过重新复合（recomposite）来形成一个新的帧。

层创立的条件如下：

3D 或透视变换 CSS 属性

使用加速视频解码的 <video> 元素

拥有 3D (WebGL) 上下文或加速的 2D 上下文的 <canvas> 元素

复合插件(如 Flash)

进行 opacity/transform 动画的元素

拥有加速 CSS filters 的元素

元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)

元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

总结：

对布局属性进行动画，浏览器需要为每一帧进行重绘并上传到 GPU 中
对合成属性进行动画，浏览器会为元素创建一个独立的复合层，当元素内容没有发生改变，该层就不会被重绘，浏览器会通过重新复合来创建动画帧

转载于:https://www.cnblogs.com/3body/p/5417204.html

移动端动画使用transform提升性能相关推荐

Git 2.18版本发布：支持Git协议v2，提升性能
2019独角兽企业重金招聘Python工程师标准>>> Git 2.18版本发布:支持Git协议v2,提升性能Git 2.18版本发布:支持Git协议v2,提升性能新版本协议的主要 ...
从零开始写一个武侠冒险游戏-6-用GPU提升性能(1)
从零开始写一个武侠冒险游戏-6-用GPU提升性能(1) ----把帧动画的实现放在GPU上作者:FreeBlues 修订记录 2016.06.19 初稿完成. 2016.08.05 增加对 XCod ...
从零开始写一个武侠冒险游戏-8-用GPU提升性能(3)
从零开始写一个武侠冒险游戏-8-用GPU提升性能(3) ----解决因绘制雷达图导致的帧速下降问题作者:FreeBlues 修订记录 2016.06.23 初稿完成. 2016.08.07 增加对 ...
提升性能的开发者选项，华为手机必开4种设置，让手机飞起来
提升性能的"开发者选项",华为手机必开4种设置,让手机飞起来华为手机的用户们,你们是否了解手机中的"开发者选项"呢?我们调试好手机中的"开发者选项& ...
移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性在移动端时可以放心的使用h5相关的标签但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
隐私计算+区块链原生融合之后平台开放、提升性能，蚂蚁链隐私协作平台FAIR重磅架构升级
蚂蚁数科技术新突破:软硬协同提升端到端隐私计算性能,小时级计算缩短至3分钟. 隐私协作平台FAIR 亿级数据安全匹配能力提升10倍以上. 9月1日-3日,2022世界人工智能大会(WAIC)在上海举办 ...
核心动画（12）性能调优
核心动画(12)性能调优性能调优 CPU VS GPU 动画的舞台 GPU相关的操作 CPU相关的操作 IO相关操作测量,而不是猜测真机测试,而不是模拟器保持一致的帧率 Instruments ...
iOS动画进阶(十二)性能调优
性能调优代码应该运行的尽量快,而不是更快 - 理查德在第一和第二部分,我们了解了Core Animation提供的关于绘制和动画的一些特性.Core Animation功能和性能都非常强大,但如果 ...
ARM 发布最新高端移动技术，提升沉浸式体验
ARM高端IP将应用于2017年推出的旗舰型移动设备,重新定义虚拟现实(VR)与增强现实(AR)体验 · ARM® Mali™-G71 图形处理器以全新 Bifrost 架构为基础,提供卓越的能效和性 ...
paip. 提升性能---hibernate的缓存使用总结
paip. 提升性能---hibernate的缓存使用总结作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏地址:http://blog ...

移动端动画使用transform提升性能

原理：

移动端动画使用transform提升性能相关推荐

最新文章

热门文章