Monster example

この記事では、メモリツールの機能を示すために使用するシンプルなページについて説明します。

これは https://mdn.github.io/performance-scenarios/js-allocs/alloc.html で試すことができます。コードは以下のとおりです:

var MONSTER_COUNT = 5000;
var MIN_NAME_LENGTH = 2;
var MAX_NAME_LENGTH = 48;

function Monster() {

  function randomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

  function randomName() {
    var chars = "abcdefghijklmnopqrstuvwxyz";
    var nameLength = randomInt(MIN_NAME_LENGTH, MAX_NAME_LENGTH);
    var name = "";
    for (var j = 0; j < nameLength; j++) {
      name += chars[randomInt(0, chars.length-1)];
    }
    return name;
  }

  this.name = randomName();
  this.eyeCount = randomInt(0, 25);
  this.tentacleCount = randomInt(0, 250);
}

function makeMonsters() {
  var monsters = {
    "friendly": [],
    "fierce": [],
    "undecided": []
  };

  for (var i = 0; i < MONSTER_COUNT; i++) {
    monsters.friendly.push(new Monster());
  }

  for (var i = 0; i < MONSTER_COUNT; i++) {
    monsters.fierce.push(new Monster());
  }

  for (var i = 0; i < MONSTER_COUNT; i++) {
    monsters.undecided.push(new Monster());
  }

  console.log(monsters);
}

var makeMonstersButton = document.getElementById("make-monsters");
makeMonstersButton.addEventListener("click", makeMonsters);

このページにはボタンがあります。このボタンを押すと、コードがモンスターを生成します。詳細は以下のとおりです:

• コードが 3 つのプロパティを持つオブジェクトを生成します。それぞれのプロパティは配列です:
  • どう猛なモンスター
  • 友好的なモンスター
  • タイプがわかっていないモンスター
• コードはそれぞれの配列に、ランダムに初期化したモンスター 5000 体を生成および追加します。それぞれのモンスターは以下の属性を持ちます:
  • モンスターの名前を示す文字列
  • モンスターの目の数を表す数値
  • モンスターの触手の数を表す数値

従って、JavaScript のヒープ上に割り当てられるメモリの構造は、3 つの配列を持つオブジェクトになります。それぞれの配列は 5000 個のオブジェクト (モンスター) を持ち、そのオブジェクトが文字列と 2 つの数値を持ちます: