利用js计算出当前web页面的帧率情况

使用方法：

将下面的代码复制到console里面就可以打印出当前页面的帧率情况

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();

原理：
正常而言 requestAnimationFrame 这个方法在一秒内会执行 60 次，也就是不掉帧的情况下。假设动画在时间 A 开始执行，在时间 B 结束，耗时 x ms。而中间 requestAnimationFrame 一共执行了 n 次，则此段动画的帧率大致为：n / (B - A)。

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

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

参考文章：
https://mp.weixin.qq.com/s?__biz=MzU1NzY5ODc1Nw==&mid=2247484471&idx=1&sn=30b1046e512d00742d5b896e50b9f6be&chksm=fc309f9dcb47168bc033d4ecb15c111eaa11dd7b968aa33965a25f6eeccf7ceea3dcf69d3d39&mpshare=1&scene=23&srcid=0203Z6Gk1fXSRboh2ky1054p&sharer_sharetime=1612360242476&sharer_shareid=dc64beb4b10024ccd286a99670cf4ebe#rd