CoreNext 主题美化：网站左上角添加 FPS 帧率显示

帧率（FPS）是衡量页面渲染流畅度的重要指标。为方便调试或增加技术感，可在网站左上角添加 FPS 帧率显示功能。本教程基于 CoreNext 主题，通过嵌入轻量级 JavaScript 代码，实现在任意位置（默认左上角）实时显示当前页面的 FPS 值，样式支持自定义，不影响网站性能。

效果演示

设置教程

只需要在网站中加入javascript代码即可

// 网站左上角添加 FPS 帧率显示,帧率 _ 好软猫[www.haoruanmao.com] $('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(); })();

更多推荐

CoreNext 主题美化教程合集