files/ja/tools/memory/monster_example/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

---
title: Monster example
slug: Tools/Memory/Monster_example
translation_of: Tools/Memory/Monster_example
---
<div>{{ToolsSidebar}}</div><p>この記事では、メモリツールの機能を示すために使用するシンプルなページについて説明します。</p>

<p>これは <a class="external external-icon" href="https://mdn.github.io/performance-scenarios/js-allocs/alloc.html">https://mdn.github.io/performance-scenarios/js-allocs/alloc.html</a> で試すことができます。コードは以下のとおりです:</p>

<pre class="brush: js">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 &amp;lt; 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 &amp;lt; MONSTER_COUNT; i++) {
    monsters.friendly.push(new Monster());
  }

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

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

  console.log(monsters);
}

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

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

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

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

<p><a name="allocation-graph"><img alt="" src="https://mdn.mozillademos.org/files/12369/monsters.svg" style="display: block; height: 521px; margin-left: auto; margin-right: auto; width: 500px;"></a></p>