#推荐

如何在自己的网站添加FPS帧率显示呢？

我们经常打游戏时非常的关注游戏里的帧率的变化，游戏帧越低就越容易卡段，

那么我们是否也可以给网站弄个FPS帧率显示呢？毋庸置疑当然可以啦，

如果注意观察我网站的左上角，就会发现有xxFPS这几个字不断的发生变化，没错，它就是今天的主角FPS。

fps演示图

其实非常的简单，只需一句js代码即可实现！今天就给大家分享一下网站添加帧率显示的教程，请往下看！

把下面的js代码复制粘贴到你模板的footer.php文件里面即可。

<!-- 显示FPS开始 -->
<script>
//if ((!navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) {//匹配手机，把注释去掉就只显示PC端
    $('body').before('<div id="fps" style="color:#FFB6C1;z-index:10000;position:fixed;top:3px;left:3px;font-weight:bold;"></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) {
            $('#fps').html(fps + 'FPS');
        }
        ;
        step();
    }
    )();
//}//手机和电脑开启
</script>
<!-- 显示FPS结束 -->