stats.js使用性能監控源碼分析

這篇文章主要介紹“stats.js使用性能監控源碼分析”，在日常操作中，相信很多人在stats.js使用性能監控源碼分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”stats.js使用性能監控源碼分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

1.性能監控

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

• FPS 在最近一秒渲染的幀數量。數值越高，性能越好.

• MS 渲染幀所需的毫秒數。數值越低，性能越好.

• MB 占用的內存大小. (Chrome 瀏覽器快捷鍵后面添加--enable-precise-memory-info 命令)

2.fps 計算

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

3.ms 每個渲染幀運行需要多少毫秒

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

4.memory 內存占用

usedJSHeapSize已經使用的內存

jsHeapSizeLimit內存大小限制

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

5.畫 Canvas 的板面

創建 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坐標
    TEXT_Y = 2 * PR, //文本y坐標
    GRAPH_X = 3 * PR, //圖表x坐標
    GRAPH_Y = 15 * PR, //圖表y坐標
    GRAPH_WIDTH = 74 * PR, //圖表寬度
    GRAPH_HEIGHT = 30 * PR; //圖表高度
  //創建canvas
  var canvas = document.createElement('canvas');
  canvas.width = WIDTH;
  canvas.height = HEIGHT;
  canvas.style.cssText = 'width:80px;height:48px';
  var context = canvas.getContext('2d');
  //設置字體樣式
  context.font = 'bold ' + 9 * PR + 'px Helvetica,Arial,sans-serif';
  context.textBaseline = 'top';
};

板面更新數值

update:function (value, maxValue) {
//監控過程中，最小最大值范圍
      min = Math.min(min, value);
      max = Math.max(max, value);
      context.fillStyle = bg;
      context.globalAlpha = 1;
      //清空內容重繪
      context.fillRect(0, 0, WIDTH, GRAPH_Y);
      context.fillStyle = fg;
      //畫文本，當前數值，name,最小最大值
      context.fillText(
        round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')',
        TEXT_X,
        TEXT_Y
      );
    //截取canvas之前的內容范圍，往前移動，覆蓋內容
      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;
      //畫出最新的數值矩形
      context.fillRect(
        GRAPH_X + GRAPH_WIDTH - PR,
        GRAPH_Y,
        PR,
        round((1 - value / maxValue) * GRAPH_HEIGHT)
      );
    }

6.創建 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';
//點擊切換板面模式
container.addEventListener(
  'click',
  function (event) {
    event.preventDefault();
    showPanel(++mode % container.children.length);
  },
  false
);
//添加canvas板面
function addPanel(panel) {
  container.appendChild(panel.dom);
  return panel;
}
//顯示對應的板面模式
function showPanel(id) {
  for (var i = 0; i < 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的內存板面
if (self.performance && self.performance.memory) {
  var memPanel = addPanel(new Stats.Panel('MB', '#f08', '#201'));
}
//默認顯示fps
showPanel(0);

每個板面數值的更新

  var beginTime = (performance || Date).now(),
    prevTime = beginTime,
    frames = 0;
//開始時間
begin: function () {
      beginTime = (performance || Date).now();
    },
//計算
    end: function () {
      frames++;
      var time = (performance || Date).now();
    //ms板面的數值
      msPanel.update(time - beginTime, 200);
      if (time >= prevTime + 1000) {
        //fps板面數值
        fpsPanel.update((frames * 1000) / (time - prevTime), 100);
        prevTime = time;
        frames = 0;
        //內存板面數值更新
        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();

到此，關于“stats.js使用性能監控源碼分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！