安鹿分享利用JavaScript在博客左上角显示FPS帧数的实现实技术计划
。通过在博客底部增补JS代码，博客利用 requestAnimationFrame API实时计算帧率 ，左上帧率每秒更新一次显示数值，角F教程监控以固定定位方式呈现于页面左上角
。显示

代码简洁易部署，代码可扶植站长监控页面性能，分享晋升技术调试便利性，实现实为博客增补技术展示元素。博客

直接将以下代码加到博客底部就完工了

$(<span class="hljs-string">body</span>).before(<span class="hljs-string">
</span>);
<span class="hljs-keyword">var</span> showFPS = (<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{
<span class="hljs-keyword">var</span> requestAnimationFrame =  
        window.requestAnimationFrame||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame||
        window.oRequestAnimationFrame||
        window.msRequestAnimationFrame||
<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">callback</span>)</span>{
            window.setTimeout(callback,左上帧率 <span class="hljs-number">1000</span>/<span class="hljs-number">60</span>); 
}; 
<span class="hljs-keyword">var</span> e,pe,pid,fps,last,offset,step,appendFps; 
    fps = <span class="hljs-number">0</span>; 
    last = Date.now(); 
    step = <span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{
        offset = Date.now() - last; 
        fps += <span class="hljs-number">1</span>; 
<span class="hljs-keyword">if</span>( offset >= <span class="hljs-number">1000</span>){
        last += offset; 
appendFps(fps); 
        fps = <span class="hljs-number">0</span>; 
}
requestAnimationFrame( step ); 
}; 
    appendFps = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">fps</span>)</span>{
        console.log(fps+<span class="hljs-string">FPS</span>);
        $(<span class="hljs-string">#fps</span>).html(fps+<span class="hljs-string">FPS</span>);
};
step();
})();
$(body).before(
);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();})();
$(body).before(
);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();})();

注意这是JavaScript代码
需要加在 标签内