网页添加实时显示FPS帧率

Web前端评论372阅读模式

通过一下面的代码,可以让网页实时显示FPS帧率。

<script>
	jQuery(document).ready(function($){
	$('body').before('<div id="fps" style="position: fixed;right: 20px;bottom: 5px;color: #fff;font-size: 1.2px;line-height: 1;z-index:10000;padding: 5px 8px;background: #3690cf;border-radius: 5px;"></div>');
	var showFPS = (function() {
		var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
		function(callback) {
			window.setTimeout(callback, 1000 / 60);
		};
		var e, pe, pid, fps, last, offset, step, appendFps;

		fps = 0;
		last = Date.now();
		step = function() {
			offset = Date.now() - last;
			fps += 1;
			if (offset >= 1000) {
				last += offset;
				appendFps(fps);
				fps = 0;
			}
			requestAnimationFrame(step);
		};
		appendFps = function(fps) {
			console.log(fps + ' FPS');
			$('#fps').html(fps + ' FPS');
		};
		step();
	})();
});
</script>

源代码来自网络,至于具体用处是什么,是测试网页的,还是测试浏览器性能的?暂时不知道,反倒是感觉会影响网页加载速度呢。

网页添加实时显示FPS帧率

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

拖动滑块以完成验证