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();
  })();
  generic
  939 Bytes
  © 紫禁源码资源站
  // 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();
  })();

   

感谢您的来访，获取更多精彩文章请收藏本站。