一段简单的显示当前页面FPS的代码

写前端代码，尤其是做一个前端框架的时候，经常需要及时知道代码的大致性能，这时候如果能有个好的办法能一直看到当前页面的fps就好了。

整体思路是一秒有一千毫秒，先记录当前时间作为最后一次记录fps的时间，通过 requestAnimationFrame 回调不断给累加fsp计数器，并且判断上次记录fps的时间是否达到1000毫秒以上，如果满足条件，就将fps累加器的值作为当前fps显示，并且重置fps累加器。

这里写了段比较简单的显示FPS的代码：

var showFPS = (function () {
    // noinspection JSUnresolvedVariable, SpellCheckingInspection
    var requestAnimationFrame =
        window.requestAnimationFrame || //Chromium  
        window.webkitRequestAnimationFrame || //Webkit 
        window.mozRequestAnimationFrame || //Mozilla Geko 
        window.oRequestAnimationFrame || //Opera Presto 
        window.msRequestAnimationFrame || //IE Trident? 
        function (callback) { //Fallback function 
            window.setTimeout(callback, 1000 / 60);
        };

    var dialog;
    var container;

    var fps = 0;
    var lastTime = Date.now();

    function setStyle(el, styles) {
        for (var key in styles) {
            el.style[key] = styles[key];
        }
    }

    function init() {
        dialog = document.createElement('dialog');
        setStyle(dialog, {
            display: 'block',
            border: 'none',
            backgroundColor: 'rgba(0, 0, 0, 0.6)',
            margin: 0,
            padding: '4px',
            position: 'fixed',
            top: 0,
            right: 'auto,',
            bottom: 'auto',
            left: 0,
            color: '#fff',
            fontSize: '12px',
            textAlign: 'center',
            borderRadius: '0 0 4px 0'
        });
        container.appendChild(dialog);
    }

    function calcFPS() {
        offset = Date.now() - lastTime;
        fps += 1;

        if (offset >= 1000) {
            lastTime += offset;
            displayFPS(fps);
            fps = 0;
        }

        requestAnimationFrame(calcFPS);
    };

    function displayFPS(fps) {
        var fpsStr = fps + ' FPS';

        if (!dialog) {
            init();
        }

        if (fpsStr !== dialog.textContent) {
            dialog.textContent = fpsStr;
        }
    }

    return function (parent) {
        container = parent;
        calcFPS();
    };
})();

showFPS(document.body);