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

web开发作者:dayu日期:5天前点击:0
<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来完毕整个动画效果。应该就会棒棒哒~


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

原文地址:http://www.cnblogs.com/clnchanpin/p/7220717.html


下一篇       上一篇