WordPress添加FPS帧率显示[WP教程]

前言

我们经常打游戏时非常的关注游戏里的帧率的变化,游戏帧越低就越容易卡段,那么我们是否也可以给网站弄个FPS帧率显示呢?毋庸置疑当然可以啦,如果注意观察我网站的左上角,就会发现有xxFPS这几个字不断的发生变化,没错,它就是今天的主角FPS。其实非常的简单,只需一句js代码即可实现!今天就给大家分享一下WordPress添加帧率显示的教程,请往下看!

教程

  • 你只需在网站管理后台—》主题设置—》自定义代码—》自定义javascript代码,把下面的js代码复制粘贴到里面即可。
  • // FPS帧
    $('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;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){ 
            console.log(fps+'FPS');
            $('#fps').html(fps+'FPS');
        };
        step();
    })();

效果截图

微信图片_20220117132308.png

 

 
 
请登录后发表评论

    没有回复内容