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
82
|
---
title: Exemple d'allocation de monstres
slug: Tools/Memory/Monster_example
translation_of: Tools/Memory/Monster_example
original_slug: Outils/Memory/Monster_example
---
<div>{{ToolsSidebar}}</div><p>Cet article décrit une page web très simple que nous utilisons pour illustrer certaines fonctionnalités de l'outil <a href="/fr/docs/Outils/Memory">Mémoire</a>.</p>
<p>Il est possible de l'essayer sur le site : <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>. Voici le code :</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>Cette page contient un bouton : Lorsque celui-ci est activé, le code crée des monstres plus précisément :</p>
<ul>
<li>Le code crée un objet avec trois propriétés, chacune étant un tableau :
<ul>
<li>Un pour les monstres "méchants" (fierce).</li>
<li>Un pour les monstres "gentils" (friendly).</li>
<li>UIn pour les monstres qui n'ont pas encore décidé (undecided).</li>
</ul>
</li>
<li>Pour chaque tableau, le code crée 5000 monstres générés aléatoirement. Chaque monstre a :
<ul>
<li>Une chaine de caractères, pour le nom du monstre.</li>
<li>Un nombre représentant le nombre d'yeux qu'il possède.</li>
<li>Un nombre représentant le nombre de tentacules qu'il possède.</li>
</ul>
</li>
</ul>
<p>Ainsi, la structure de la mémoire allouée sur la heap JavaScript est un objet contenant trois tableaux contenant chacun 5000 objets (les monstres) chaque objet contient une string et deux int :</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>
|
