-webkit-transform:translate3d(0,0,0)触发GPU加速,让网页动画更流畅

前段时间,按照美拍的视频效果写了一个效果类似的网页版的动画。电脑上安装了三种浏览器:IE、Chrome、Firefox。分别作了测试,结果显示Chrome在这方面的渲染效果最差,经常出现卡顿现象,ff表现最好。一直百思不得其解,尤其是之前使用canvas标签做图片滤镜效果,chrome浏览器居然显示不了滤镜效果,然而其他浏览器均能正常显示,大谷歌你肿么了...对渲染多张图片和动画效果表示放弃了么...

昨天和高人聊天,说道这个情况,他说道了transform:translate3d(0,0,0)可以触发硬件加速,然后楼主今天就百度了一下这个CSS3提供的3D效果,果然个属性都会开启GPU硬件加速模式,从而让浏览器在渲染动画时从CPU转向GPU。

于是乎,楼主今天给文件里添加了如下代码:

<span style="white-space:pre">	</span>transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	-o-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-webkit-backface-visibility:hidden;
	-webkit-perspective:1000;
	-moz-backface-visibility:hidden;
	-moz-perspective:1000;
	backface-visibility:hidden;
	perspective:1000;
然后利用Chrome的developer Tools 中的Timeline工具,检测整个动画运行性能参数,为了做到最好的对比效果,先测试了改进后的版本,然后再测未改进版本的,以防止由于缓存来带的影响。先测试改进版的页面,图片会缓存,这样子再测未改进版本的,只能说对未改进版本的更有利,这样的情况下进行对比,反而更能说明问题,哈哈。

改进版本参数:




未改进参数:


未改进版本的fps(每秒传输帧数,值越高画面就越流畅)一半多的时间都是小于30fps,而改进后的动画fps基本都超过60fps,楼主自己去围观动画效果,也发现了明显的改进,Chrome浏览器的不流畅效果得到极大的改进。当然对于整个效果,楼主CSS3与jQ动画结合使用,jQ的动画效果比不上CSS3,所以等楼主进一步改进,用强大的CSS3来完成整个动画效果,应该就会棒棒哒~

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

静媛不圆

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值