H5中CSS3动画的性能优化
2020年的最后10天,愿你来年有始料不及的运气,也有突如其来的惊喜。
触发重布局的属性
有些节点,当你改变他时,会需要重新布局(这也意味着需要重新计算其他被影响的节点的位置和大小)。这种情况下,被影响的DOM树越大(可见节点),重绘所需要的时间就会越长,而渲染一帧动画的时间也相应变长。所以需要尽力避免这些属性。
一些常用的改变时会触发重布局的属性:
盒子模型相关属性会触发重布局:
•width•height•padding•margin•display•border-width•border•min-height
定位属性及浮动也会触发重布局:
•top•bottom•left•right•position•float•clear
改变节点内部文字结构也会触发重布局:
•text-align•overflow-y•font-weight•overflow•font-family•line-height•vertival-align•white-space•font-size
这么多常用属性都会触发重布局,可以看到,他们的特点就是可能修改整个节点的大小或位置,所以会触发重布局。
别使用CSS类名做状态标记
如果在网页中使用CSS的类来对节点做状态标记,当这些节点的状态标记类修改时,将会触发节点的重绘和重布局。所以在节点上使用CSS类来做状态比较是代价很昂贵的。
触发重绘的属性
修改时只触发重绘的属性有:
•color•border-style•border-radius•visibility•text-decoration•background•background-image•background-position•background-repeat•background-size•outline-color•outline•outline-style•outline-width•box-shadow
这样可以看到,这些属性都不会修改节点的大小和位置,自然不会触发重布局,但是节点内部的渲染效果进行了改变,所以只需要重绘就可以了。
手机就算重绘也很慢
在重绘时,这些节点会被加载到GPU中进行重绘,这对移动设备如手机的影响还是很大的。因为CPU不如台式机或笔记本电脑,所以绘画的时间更长。
触发图层重组的属性
透明度竟然不会触发重绘
需要注意的是,上面那些触发重绘的属性里面没有opacity(透明度),很奇怪不是吗?实际上透明度的改变后,GPU在绘画时只是简单的降低之前已经画好的纹理的alpha值来达到效果,并不需要整体的重绘。不过这个前提是这个被修改opacity本身必须是一个图层,如果图层下还有其他节点,GPU也会将他们透明化。
强迫浏览器创建图层
在Blink和WebKit的浏览器中,当一个节点被设定了透明度的相关过渡效果或动画时,浏览器会将其作为一个单独的图层,但很多开发者使用translateZ(0)或者translate3d(0,0,0)去使浏览器创建图层。这种方式可以消除在动画开始之前的图层创建时间,使得动画尽快开始(创建图层和绘制图层还是比较慢的),而且不会随着抗锯齿而导出突变。不过这种方法需要节制,否则会因为创建过多的图层导致崩溃。
transform变换是你的选择
我们通过节点的transform可以修改节点的位置、旋转、大小等。我们平常会使用left和top属性来修改节点的位置,但正如上面所述,left和top会触发重布局,修改时的代价相当大。取而代之的更好方法是使用translate,这个不会触发重布局。
H5中CSS3动画的性能优化相关推荐
- 【腾讯优测干货分享】使用多张图片做帧动画的性能优化
本文来自于Dev Club 开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57fc8cea302e4725036142f6 使用多张图片做帧动画的性能优 ...
- java如何运用多帧图片_【腾讯优测干货分享】使用多张图片做帧动画的性能优化...
使用多张图片做帧动画的性能优化 背景 QQ群的送礼物功能需要加载几十张图然后做帧动画,但是多张图片加载造成了非常大的性能开销,导致图片开始加载到真正播放动画的时间间隔比较长.所以需要研究一些优化方案提 ...
- 【腾讯优测干货分享】使用多张图片做帧动画的性能优化 1
本文来自于Dev Club 开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57fc8... 使用多张图片做帧动画的性能优化 背景 QQ群的送礼物功能需要 ...
- Canvas 动画的性能优化实践
作者:方勤 原文:https://blog.csdn.net/weixin_39843414/article/details/103502053 前言 去年圣诞节有一个下雪的背景动画的需求.在实现这个 ...
- 使用多张图片做帧动画的性能优化
背景 QQ群的送礼物功能需要加载几十张图然后做帧动画,但是多张图片加载造成了非常大的性能开销,导致图片开始加载到真正播放动画的时间间隔比较长.所以需要研究一些优化方案提升加载图片和帧动画的性能. 原理 ...
- Windows10中macOS10.14虚拟机性能优化教程
Python 全栈工程师核心面试 300 问深入解析(2020 版)----全文预览 Python 全栈工程师核心面试 300 问深入解析(2020 版)----欢迎订阅 Windows10中采用VM ...
- spark 算子使用类变量_自己工作中超全spark性能优化总结
来源:https://zhuanlan.zhihu.com/ p/108454557 作者:一块小蛋糕 编辑:深度传送门 Spark是大数据分析的利器,在工作中用到spark的地方也比较多,这篇总结是 ...
- android中momery检测,Android性能优化第(二)篇---Memory Monitor检测内存泄露
版权声明:本文为LooperJing原创文章,转载请注明出处! 多练习多写代码.jpg 上篇说了一些性能优化的理论部分,主要是回顾一下,有了理论,小平同志又讲了,实践是检验真理的唯一标准,对于内存泄露 ...
- iMobile中三维数据的性能优化
作者:xinxin 目前,很多项目都用SuperMap iMobile for Android产品来实现展示三维数据效果,但由于三维数据对硬件设备要求高,而移动端设备的硬件远不如PC端,所以想要在iM ...
最新文章
- python中的几种copy用法_Python3中copy模块常用功能及其他几种copy方式比较
- wxWidgets:wxCalculateLayoutEvent类用法
- UE4学习-UE4结合vs2019混合编程
- Windows10安装Ubuntu子系统+docker教程说明
- 关于C10K问题详解-突破单机性能是高性能网络编程
- 机器学习的重新思考:人工智能如何学习“失忆”?
- 一种基于平衡二叉树(AVL树)插入、查找和删除的简易图书管理系统
- 修改 gcc 和 g++ 的默认版本
- js获取html中type属性,JavaScript获取节点类型、节点名称和节点值
- 积分上下限无穷_数分笔记——5种广义积分敛散性的基本方法
- 樽海鞘群算法原理详解
- matlab upfc,UPFC是什么意思
- [附源码]Python计算机毕业设计Django大学生考勤管理系统论文
- 拯救全网的Chatgpt解封攻略
- 天池比赛-02-用Apriori算法进行商品关联分析
- 百格活动独家推出执行者晋升管理层的必备指南——《活动执行手册-思维篇》
- 代发核心期刊骗局_“代发论文”骗局:近2000人被骗 多数不愿报案
- 线性代数_4、行列式按行展开,异乘变零,拉普拉斯定理
- MySQL下载和安装(Windows)
- MUX实现不同的门电路功能
热门文章
- @所有技术人,快来翻开属于你的2021定制日历!
- 程序员过关斩将——搞定秒杀,只需要这几步!!
- IEEE 迎来首位华人主席,马里兰大学终身教授刘国瑞当选
- 腾讯智慧零售数字增长峰会:私域新生态,增长新格局
- 苹果回应:iPhone 11用北斗导航作为位置数据系统一部分;马云回应年轻人去做快递小哥;Linux Lab发布v0.5 rc3| 极客头条
- 立即预约!Meet Qt Online中国来了
- 部分美团用户被取消支付宝支付;腾讯成全球市值最高社交媒体公司;微软首次公布GitHub产品路线图 | 极客头条
- 12306 回应软件崩了;微信发布新版本,朋友圈可“斗图”;Ant Design 3.26.4 发布 | 极客头条...
- 一文详解 MySQL 高可用之 DRBD | 原力计划
- 汲取 IE6、IE8 消亡的经验,如何“杀死” IE11?