关于javascript:网页性能衡量之网页动画-fps-检测

23次阅读

共计 1957 个字符，预计需要花费 5 分钟才能阅读完成。

咱们在玩游戏时，因为每个人的设施配置差别问题，有时会非常的关注游戏里的帧率的变动，因为配置越低或者游戏程序自身优化差，就容易导致游戏过程中帧率升高，帧率越低就越容易卡顿，那么咱们是否也能够对网站进行 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 lang="zh-cn">
  <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>

形式三、通过第三方监测工具，我这里选用的是收费的灵雀利用监控平台（https://perf.51.la），性能操作和界面都比拟简洁易懂，不便查看数据，而且也是老牌的统计服务商，服务稳定性和技术还是有保障一些，而且也反对 spa 页面，比方用 vue.js 写的页面也能简略接入，有趣味的同学能够去理解一下。

这个监控工具很简略，只须要创立利用，增加代码到网站上。

总体用下来还是比拟不便的，举荐大家应用。

正文完