用一段自定义 JS 给页面加 FPS 帧率显示

页面动画掉帧一般靠肉眼判断，很难定位是哪一段脚本卡住。想有个直观数字，可以在页面角落挂一个 FPS 计数器：用 requestAnimationFrame 在每一帧回调里累加，每秒输出一次帧数。整段逻辑不到 40 行，不用引入任何库。

放在哪里

后台主题设置里的“自定义 JavaScript 代码”输入框是最省事的位置，不用改模板文件，主题升级也不会被覆盖。如果站点没有这个设置项，就写进主题的 js 文件，注意加载时机要在 DOM ready 之后。

代码

下面这段直接可用。帧率元素用 position:fixed 贴在左上角，z-index:10000 保证压在轮播图和弹窗之上：

// 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();
})();
// FPS 帧结束

效果

正常浏览时稳定在 60FPS 附近；滚动长列表、播放背景视频、打开大图时会掉到 30 甚至更低，这时候再去 console 里看是哪段脚本耗时。

几个坑

一是依赖：$(body).before(...)、$('#fps').html(...) 都是 jQuery 写法，站点没加载 jQuery 就白搭，需要改成原生 document.createElement。

二是浏览器节流：切到后台标签页时 requestAnimationFrame 不再触发，数字会停在最后一次值上，这不是页面卡死。

三是别留在生产环境：调试完就把代码删掉或者加条件判断只在本地域名显示，长期挂一个 fixed 元素会挡住左上角返回按钮的点击。