stats.js使用性能監(jiān)控源碼解讀

更新時(shí)間：2023年04月27日 09:29:08 作者：敲敲敲敲暴你腦袋

這篇文章主要為大家介紹了stats.js使用性能監(jiān)控源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1.性能監(jiān)控

github 地址:https://github.com/mrdoob/stats.js/blob/master/src/Stats.js

FPS 在最近一秒渲染的幀數(shù)量。數(shù)值越高，性能越好.
MS 渲染幀所需的毫秒數(shù)。數(shù)值越低，性能越好.
MB 占用的內(nèi)存大小. (Chrome 瀏覽器快捷鍵后面添加--enable-precise-memory-info 命令)

2.fps 計(jì)算

var fps = 0;
var prevTime = (performance || Date).now(),
  frames = 0;
function aaa() {
  frames++;
  var time = (performance || Date).now();
  //每秒計(jì)算一次渲染幀數(shù)量
  if (time &gt;= prevTime + 1000) {
    fps = (frames * 1000) / (time - prevTime);
    console.log(fps);
    prevTime = time;
    frames = 0;
  }
  window.requestAnimationFrame(aaa);
}
aaa();

3.ms 每個(gè)渲染幀運(yùn)行需要多少毫秒

let ms = 0;
var beginTime = (performance || Date).now();
function bbb() {
  //當(dāng)前時(shí)間減去開始時(shí)間
  ms = (performance || Date).now() - beginTime;
  console.log(ms);
  window.requestAnimationFrame(bbb);
  beginTime = (performance || Date).now();
}
bbb();

4.memory 內(nèi)存占用

usedJSHeapSize已經(jīng)使用的內(nèi)存

jsHeapSizeLimit內(nèi)存大小限制

let mb = 0,
  mbPercent = 0;
let prevTime = (performance || Date).now();
function ccc() {
  var time = (performance || Date).now();
  //每秒獲取一次
  if (time &gt;= prevTime + 1000) {
    //獲取性能里的內(nèi)存相關(guān)參數(shù)，前提是performance.memory存在
    var memory = performance.memory;
    //1M =1048576=2^20
    //使用了多少內(nèi)存
    mb = memory.usedJSHeapSize / 1048576;
    //內(nèi)存占用百分比
    mbPercent = memory.usedJSHeapSize / memory.jsHeapSizeLimit;
    console.log(mb, mbPercent);
  }
  window.requestAnimationFrame(ccc);
}
ccc();

5.畫 Canvas 的板面

創(chuàng)建 canvas

//name性能名稱, fg顏色, bg背景
Stats.Panel = function (name, fg, bg) {
  var min = Infinity,
    max = 0,
    round = Math.round;
  var PR = round(window.devicePixelRatio || 1);
  var WIDTH = 80 * PR, //canvas板面寬度
    HEIGHT = 48 * PR, //canvas板面高度
    TEXT_X = 3 * PR, //文本x坐標(biāo)
    TEXT_Y = 2 * PR, //文本y坐標(biāo)
    GRAPH_X = 3 * PR, //圖表x坐標(biāo)
    GRAPH_Y = 15 * PR, //圖表y坐標(biāo)
    GRAPH_WIDTH = 74 * PR, //圖表寬度
    GRAPH_HEIGHT = 30 * PR; //圖表高度
  //創(chuàng)建canvas
  var canvas = document.createElement('canvas');
  canvas.width = WIDTH;
  canvas.height = HEIGHT;
  canvas.style.cssText = 'width:80px;height:48px';
  var context = canvas.getContext('2d');
  //設(shè)置字體樣式
  context.font = 'bold ' + 9 * PR + 'px Helvetica,Arial,sans-serif';
  context.textBaseline = 'top';
};

板面更新數(shù)值

update:function (value, maxValue) {
//監(jiān)控過程中，最小最大值范圍
      min = Math.min(min, value);
      max = Math.max(max, value);
      context.fillStyle = bg;
      context.globalAlpha = 1;
      //清空內(nèi)容重繪
      context.fillRect(0, 0, WIDTH, GRAPH_Y);
      context.fillStyle = fg;
      //畫文本，當(dāng)前數(shù)值，name,最小最大值
      context.fillText(
        round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')',
        TEXT_X,
        TEXT_Y
      );
    //截取canvas之前的內(nèi)容范圍，往前移動，覆蓋內(nèi)容
      context.drawImage(
        canvas,
        GRAPH_X + PR,
        GRAPH_Y,
        GRAPH_WIDTH - PR,
        GRAPH_HEIGHT,
        GRAPH_X,
        GRAPH_Y,
        GRAPH_WIDTH - PR,
        GRAPH_HEIGHT
      );
    //清空最后的那部分
      context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT);
      context.fillStyle = bg;
      context.globalAlpha = 0.9;
      //畫出最新的數(shù)值矩形
      context.fillRect(
        GRAPH_X + GRAPH_WIDTH - PR,
        GRAPH_Y,
        PR,
        round((1 - value / maxValue) * GRAPH_HEIGHT)
      );
    }

6.創(chuàng)建 Stats 板面

var mode = 0;
var container = document.createElement('div');
container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
//點(diǎn)擊切換板面模式
container.addEventListener(
  'click',
  function (event) {
    event.preventDefault();
    showPanel(++mode % container.children.length);
  },
  false
);
//添加canvas板面
function addPanel(panel) {
  container.appendChild(panel.dom);
  return panel;
}
//顯示對應(yīng)的板面模式
function showPanel(id) {
  for (var i = 0; i &lt; container.children.length; i++) {
    container.children[i].style.display = i === id ? 'block' : 'none';
  }
  mode = id;

添加三種 canvas 板面

//添加索引為0的fps板面
var fpsPanel = addPanel(new Stats.Panel('FPS', '#0ff', '#002'));
//添加索引為1的ms板面
var msPanel = addPanel(new Stats.Panel('MS', '#0f0', '#020'));
//如果performance.memory存在，添加索引為2的內(nèi)存板面
if (self.performance &amp;&amp; self.performance.memory) {
  var memPanel = addPanel(new Stats.Panel('MB', '#f08', '#201'));
}
//默認(rèn)顯示fps
showPanel(0);

每個(gè)板面數(shù)值的更新

  var beginTime = (performance || Date).now(),
    prevTime = beginTime,
    frames = 0;
//開始時(shí)間
begin: function () {
      beginTime = (performance || Date).now();
    },
//計(jì)算
    end: function () {
      frames++;
      var time = (performance || Date).now();
    //ms板面的數(shù)值
      msPanel.update(time - beginTime, 200);
      if (time >= prevTime + 1000) {
        //fps板面數(shù)值
        fpsPanel.update((frames * 1000) / (time - prevTime), 100);
        prevTime = time;
        frames = 0;
        //內(nèi)存板面數(shù)值更新
        if (memPanel) {
          var memory = performance.memory;
          //1M =1048576=2^20
          memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
        }
      }
      return time;
    },
//更新
    update: function () {
      beginTime = this.end();
    },

7.使用 Stats

var stats = new Stats();
document.body.appendChild(stats.dom);
function animate() {
  stats.update();
  window.requestAnimationFrame(animate);
}
animate();