diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/tools/memory/monster_example | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/ja/tools/memory/monster_example')
-rw-r--r-- | files/ja/tools/memory/monster_example/index.html | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/files/ja/tools/memory/monster_example/index.html b/files/ja/tools/memory/monster_example/index.html new file mode 100644 index 0000000000..3458550a5f --- /dev/null +++ b/files/ja/tools/memory/monster_example/index.html @@ -0,0 +1,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 &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 &lt; MONSTER_COUNT; i++) { + monsters.friendly.push(new Monster()); + } + + for (var i = 0; i &lt; MONSTER_COUNT; i++) { + monsters.fierce.push(new Monster()); + } + + for (var i = 0; i &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> |