们在玩游戏时，因为每个人的设备配置差异问题，有时会十分的关注游戏里的帧率的变化，因为配置越低或者游戏程序本身优化差，就容易导致游戏过程中帧率降低，帧率越低就越容易卡顿，那么我们是否也可以对网站进行 FPS 帧率检测和监控呢？

浏览器对于网页的渲染方式和游戏中的渲染方式其实并不相同，在游戏中由于画面是不断变化的，需要持续渲染才能形成流畅的画面。但是浏览器中的网页并不一样如果你不进行一些操作网页显示的内容可能并不会发生变化，所以并不需要实时渲染。

fps主要用来衡量动画的性能，具体到页面那就是页面动画的性能，而不是整个页面的性能。图片滑动是动画，页面滚动本质上也是动画。当页面静止并无其他动画用fps去衡量是不恰当的。

但是，fps 帧率作为网页性能衡量标准的其中之一，在某些业务场景下也不能忽视，我们可以通过以下几种方式对web页面进行监控：

1、通过chrome开发者工具进行监控。

2、通过对页面添加 Javascript 代码实现。

3、通过第三方监控工具探针快速集成监控。

方法一、通过chrome开发者工具进行监控

这种方式一般在开发阶段使用：

1 、首先，在chrome 浏览器下 按下 F12 打开chrome 开发者工具-performance ，点击reload 按钮。

2、等待加载完毕，你就可以看到下图的各维度的分析结果，但这不是今天我们要讨论的重点。

3 、 点击左上角工具栏，找到 More tools 中 的 rendering ，勾选上 FPS meter

方法二、通过给网页添加一段 Javascript 代码，在页面左上角就会显示当前网页的 fps 值。

demo ：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FPS Test Page</title>
  </head>
  <body>
    <script>
      // 创建 fps 面板展示元素
      var fpsPanel = document.createElement("div");
      fpsPanel.setAttribute("id", "fps");
      fpsPanel.style.position = "fixed";
      fpsPanel.style.left = "3px";
      fpsPanel.style.top = "3px";
      fpsPanel.style.color = "red";
      fpsPanel.style.zIndex = 10000;
      // 将面板插入到 body
      document.body.append(fpsPanel);
      // fps 监测逻辑实现
      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) {
          // 打印 fps
          console.log(fps + "FPS");
          // 修改面板显示的值
          fpsPanel.innerHTML = fps + "FPS";
        };
        step();
      })();
    </script>
  </body>
</html>

方式三、通过第三方监测工具，我这里选用的是免费的 灵雀应用监控平台（baidu搜索 51la网站统计-首页即可找到这个平台），功能操作和界面都比较简洁易懂，方便查看数据，而且也是老牌的统计服务商，服务稳定性和技术还是有保证一些，而且也支持spa页面，比如用vue.js写的页面也能简单接入，有兴趣的同学可以去了解一下。

灵雀应用监控平台（ https://perf.51.la ）

用这个监控工具很简单，只需要创建应用，添加代码到网站上。

总体用下来还是比较方便的，推荐大家使用。