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

Posted 2020-09-29 clnchanpin

前段时间，依照美拍的视频效果写了一个效果类似的网页版的动画。

电脑上安装了三种浏览器：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来完毕整个动画效果。应该就会棒棒哒~