Javascript 动画流畅度测试

阅读(666)

以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帧做播放:奇数帧复制翻倍,偶数帧复制为三倍。

via: https://en.wikipedia.org/wiki/Frame_rate

Tags: 性能