Javascript 动画流畅度测试
阅读(3436)以FPS(Frames per second)衡量流畅度,1s内执行60帧以上为最佳,最低需要每秒24帧以上。想想剪纸动画《葫芦兄弟》吧。
方案1:使用Chrome自带工具
https://developer.chrome.com/devtools/docs/rendering-settings#show-fps meter
打开chrome dev tools,按下ESC,勾选 FPS meter 选项即可。
方案2:使用开源stat.js
https://github.com/mrdoob/stats.js/
执行下述代码(或存储为书签,按需执行),其中js文件地址需要翻墙,可以存储一份到本地;同时因为使用了相对地址,可补充完整协议支持本地调试。
javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
补充
早期无声黑白电影,FPS在16~24。现在的24帧视频会被填充为60帧做播放:奇数帧复制翻倍,偶数帧复制为三倍。