码迷,mamicode.com
首页 > 其他好文 > 详细

动画FPS计算

时间:2019-07-07 14:34:03      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:obs   mat   rman   时间间隔   time   ret   模拟   误差   统计   

1、chrome的debug

技术图片

 

2、PerformanceObserver

var observer = new PerformanceObserver(function (list) {
            var perfEntries = list.getEntries();
            for (var i = 0; i < perfEntries.length; i++) {
                console.log("frame: ", perfEntries[i]);
            }
        });

        // subscribe to Frame Timing
        observer.observe({ entryTypes: [‘frame‘] }); 

  可是浏览器都不支持。。。。

 

3、requestAnimationFrame模拟

var rAF = function () {
            return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                }
            );
        }();

        var frame = 0;
        var allFrameCount = 0;
        var lastTime = Date.now();
        var lastFameTime = Date.now();

        var loop = function () {
            var now = Date.now();
            var fs = (now - lastFameTime);
            var fps = Math.round(1000 / fs);

            lastFameTime = now;
            // 不置 0,在动画的开头及结尾记录此值的差值算出 FPS
            allFrameCount++;
            frame++;

            if (now > 1000 + lastTime) {
                var fps = Math.round((frame * 1000) / (now - lastTime));
                console.log(`${new Date()} 1S内 FPS:`, fps);
                frame = 0;
                lastTime = now;
            };

            rAF(loop);
        }

        loop();

  

  

如果我们需要统计某个特定动画过程的帧率,只需要在动画开始和结尾两处分别记录 allFrameCount 这个数值大小,再除以中间消耗的时间,也可以得出特定动画过程的 FPS 值。

值得注意的是,这个方法计算的结果和真实的帧率肯定是存在误差的,因为它是将每两次主线程执行 javascript 的时间间隔当成一帧,而非上面说的主线程加合成线程所消耗的时间为一帧。但是对于现阶段而言,算是一种可取的方法。

动画FPS计算

标签:obs   mat   rman   时间间隔   time   ret   模拟   误差   统计   

原文地址:https://www.cnblogs.com/yiyi17/p/11146124.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!