微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

web 里计算 FPS

2015-11-17 20:06 前端大全

(点击上方,可快速关注)


英文:codeaurora

译者:AlloyTeam

网址:http://www.alloyteam.com/2015/10/web-computing-fpstranslation/


帧率(FPS)用于描述成像装置产生连续图像的频率 动画其实就是显示连续帧产生的错觉。如果FPS太低,动画将不平滑,甚至人眼都能看到每一帧图像。 一般运动图像的帧率为24 FPS,电视使用30 FPS。在现代游戏中,玩家必须在视觉跟踪动画对象 ,并迅速作出反应,帧速率一般是每秒30帧和60帧之间。然而,快速移动的物体,可能需要更高的帧速率 ,以避免不希望的视觉假象(闪现)。虽然从理论上讲,我们可以达到极高的帧速率,在FPS由显示器的刷新速率的限制 。现代的液晶电视能120 FPS,甚至240 FPS。在手机,显示器是最有可能限制为60 FPS。


图1:1秒内不同动画帧速率比较



HTML5提供的Web开发人员提供了新的工具来创建动态和交互式内容,如动画和游戏。 帧速率仍作为开发人员的重要指标,fps太低会带来差劲的用户体验。所以开发人员希望有可靠的方式来计算HTML5页面的FPS。 但是问题是,没有办法得到可靠的FPS。 Web开发人员通常通过每次loop和上次loop的间隔来时间time,再通过1000/time来算fps。 微软发布了许多HTML5性能基准测试.如FishIE演示,该演示主要是能够计算Canvas中图像的fps。 。Facebook的JSGamebench主要是计算使用WebGL中展示大量动画的fps。 但是他们没有办法知道浏览器整个网页(整个网页可能包含dom、canvas、webgl、svg..)的FPS。 那么通过JavaScript能否计算出整个网页的fps?


JavaScript的动画


制作动画效果,可以使用的setInterval / setTimeout和requestAnimationFrame。 后者用于制作动画的首选方法。它将告知浏览器你马上要开始动画效果了,浏览器会在下次repaint前调用特定的方法来更新动画以达到优化的结果。


了解定时器在JavaScript中是如何工作是很重要的。 定时器延迟是没法保证的,不准确的,因为所有的JavaScript在单个线程中执行,只有当前面队列执行完毕且轮到了自己才能被执行。 如下图: usage


如上图所以,不仅时间不够精确,而且由于排队,导致setInterval的一次回调被延迟到了下一轮回调,为了避免同一时间执行多次setInterval的回调, 上次次的将被浏览器放弃执行。


FishIE


所以从上面可以知道,使用setInterval(function(){},16.7)是有可能达不到60fps,是什么导致了回调的延迟?


  • 画布的大小

  • 鱼的数量的位置计算

  • 鱼的大小

  • 平移,缩放,转换的计算

  • 背景(鱼缸)


结论


因为浏览器还没有提供通过JavaScript测量真正的FPS一种标准的方法, Web benchmarks测试出来的FPS本质上是不可信的(它可以测试SVG、Canvas、WebGL等渲染的FPS,而没法测试整个网页)。 Mozilla已经提供了一个方法来解决这个问题:mozPaintCount变量; 返回的次数文档已paint到屏幕的数目。理想情况下,我们会希望这个有待规范 ,使所有的现代浏览器将提供衡量FPS的标准接口。随着富媒体网站越来越多,保持FPS稳定的是很重要的事情, 在流畅的30帧运行的动画比跳动的50 FPS受欢迎得多。在webkit系列的浏览器中,解决这个问题的办法是公开一个webkitPaintCount变量。 我们可以通过webkitPaintCount的变化得到真正意义上的FPS.



【今日微信公号推荐↓】


微信号:BestUIDesign

(长按上图,可自动识别二维码)


「UI设计达人」分享 UI 设计精选文章、案例、行业趋势、课程和书籍。



前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 Java架构师与开发者提高效率的10个工具 phper的思维定势 DockerCon 2016 D2 | PPT全程实录+详细解读 Java中避免NullPointerException的一些方法 【腾讯内部干货分享】安卓包体压缩——分析Dalvik字节码进行减包优化