前段时间，按照美拍的视频效果写了一个效果类似的网页版的动画。电脑上安装了三种浏览器：IE、Chrome、Firefox。分别作了测试，结果显示Chrome在这方面的渲染效果最差，经常出现卡顿现象，ff表现最好。一直百思不得其解，尤其是之前使用canvas标签做图片滤镜效果，chrome浏览器居然显示不了滤镜效果，然而其他浏览器均能正常显示，大谷歌你肿么了…对渲染多张图片和动画效果表示放弃了么…
于是乎，楼主今天给文件里添加了如下代码：
<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来完成整个动画效果，应该就会棒棒哒~
我没有值得分享的感伤爱情故事，
