在美化个人博客时，我们常常会添加各种特效与插件，让页面更加生动。但装饰一多，难免会影响加载流畅度，甚至出现卡顿。这时候，“帧率（FPS）”就成了一个非常关键的参考指标——它直接反映了页面的渲染性能。可问题来了：我们平时看不到实时的帧率变化，优化起来也就像“盲人摸象”。

所以今天，就给大家带来一篇实用的 Hexo Butterfly魔改教程：为你的博客添加「FPS帧率监测」功能。安装之后，屏幕上会实时显示当前页面的帧率数值，高低变化一目了然。优化效果好不好？现在你有数据说话了！

创建所需文件

创建帧率计算脚本

新建文件[根目录]\source\js\fps.js并写入如下代码：

if (window.localStorage.getItem("fpson") == undefined || window.localStorage.getItem("fpson") == "1") {
    var rAF = function () {
        return (
            window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            function (callback) {
                window.setTimeout(callback, 1000 / 60);
            }
        );
    }();
    var frame = 0;
    var allFrameCount = 0;
    var lastTime = Date.now();
    var lastFameTime = Date.now();
    var loop = function () {
        var now = Date.now();
        var fs = (now - lastFameTime);
        var fps = Math.round(1000 / fs);

        lastFameTime = now;
        // 不置 0，在动画的开头及结尾记录此值的差值算出 FPS
        allFrameCount++;
        frame++;

        if (now > 1000 + lastTime) {
            var fps = Math.round((frame * 1000) / (now - lastTime));
            if (fps <= 5) {
                var kd = `<span style="color:#bd0000">卡成ppt🤢</span>`
            } else if (fps <= 15) {
                var kd = `<span style="color:red">电竞级帧率😖</span>`
            } else if (fps <= 25) {
                var kd = `<span style="color:orange">有点难受😨</span>`
            } else if (fps < 35) {
                var kd = `<span style="color:#9338e6">不太流畅🙄</span>`
            } else if (fps <= 45) {
                var kd = `<span style="color:#08b7e4">还不错哦😁</span>`
            } else {
                var kd = `<span style="color:#39c5bb">十分流畅🤣</span>`
            }
            document.getElementById("fps").innerHTML = `FPS:${fps} ${kd}`;
            frame = 0;
            lastTime = now;
        };

        rAF(loop);
    }

    loop();
} else {
    document.getElementById("fps").style = "display:none!important"
}

代码说明：此脚本会每秒计算一次页面帧率，并根据不同的帧率范围，在页面上显示对应的流畅度评价（如“卡成PPT”、“十分流畅”等）。

创建帧率显示器样式

新建文件[根目录]\source\css\fps.styl并写入如下代码：

/* 帧率检测 */
#fps {
  position: fixed;
  /* 指定位置 */
  left: 10px;
  bottom: 10px;
  z-index: 1919810;
}
[data-theme="light"] #fps {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: var(--backdrop-filter);
  padding: 4px;
  border-radius: 4px;
}
[data-theme="dark"] #fps {
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: var(--backdrop-filter);
  padding: 4px;
  border-radius: 4px;
}

样式说明：

这段代码将帧率显示器固定在页面的左下角。
它同时适配了浅色（light）和深色（dark）主题，并使用了半透明的背景毛玻璃效果。
你可以通过修改 left 和 bottom 的值来调整显示位置，也可以调整 backdrop-filter 来改变背景效果，如果不需要此效果，直接删除该行即可。

在主题配置中引入

创建好文件后，我们需要在Butterfly主题的配置文件中引入它们。

找到并打开你的主题配置文件 _config.butterfly.yml。
在文件中找到 inject 配置项，然后添加以下代码：

inject:
  head:
    # 引入帧率检测样式
    - <link rel="stylesheet" href="/css/fps.css">
    # 创建帧率显示元素
    - <span id="fps"></span>
  bottom:
    # 引入帧率检测脚本
    - <script async src="/js/fps.js"></script>