怪物示例

本文介绍了一个非常简单的网页，我们将用它来说明内存工具的一些功能。

您可以在 https://firefox-devtools.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);

页面包含一个按钮：当您按下按钮时，代码会创建一些怪物。具体来说

  • 代码会创建一个包含三个属性的对象，每个属性都是一个数组

    • 一个用于凶猛的怪物

    • 一个用于友好的怪物

    • 一个用于尚未做出决定的怪物。

  • 对于每个数组，代码都会创建并追加 5000 个随机初始化的怪物。每个怪物都有

    • 一个字符串，表示怪物的名称

    • 一个数字，表示它有多少只眼睛

    • 一个数字，表示它有多少根触手。

因此，在 JavaScript 堆上分配的内存结构是一个对象，其中包含三个数组，每个数组包含 5000 个对象（怪物），每个对象包含一个字符串和两个整数

../../../_images/monsters.svg