files/fr/outils/memory/dom_allocation_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

---
title: Exemple d'allocation DOM
slug: Outils/Memory/DOM_allocation_example
translation_of: Tools/Memory/DOM_allocation_example
---
<div>{{ToolsSidebar}}</div><p>Cet article décrit une page web très simple qui sera utilisée pour illustrer certaines fonctionnalités de l'outil Mémoire.</p>

<p>Il est possible de visiter le site à l'adresse : <a href="https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html">https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html</a>.</p>

<p>Cette page contient simplement un script qui crée un grand nombre de noeuds DOM :</p>

<pre class="brush: js">var toolbarButtonCount = 20;
var toolbarCount = 200;

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

function createToolbarButton() {
  var toolbarButton = document.createElement("span");
  toolbarButton.classList.add("toolbarbutton");
  // empêche Spidermonkey de partager les instances
  toolbarButton[getRandomInt(0,5000)] = "foo";
  return toolbarButton;
}

function createToolbar() {
  var toolbar = document.createElement("div");
  // empêche Spidermonkey de partager les instances
  toolbar[getRandomInt(0,5000)] = "foo";
  for (var i = 0; i &lt; toolbarButtonCount; i++) {
    var toolbarButton = createToolbarButton();
    toolbar.appendChild(toolbarButton);
  }
  return toolbar;
}

function createToolbars() {
  var container = document.getElementById("container");
  for (var i = 0; i &lt; toolbarCount; i++) {
    var toolbar = createToolbar();
    container.appendChild(toolbar);
  }
}

createToolbars();</pre>

<p>Voici une représentation en pseudo-code de ce que fait ce code :</p>

<pre>createToolbars()
    -&gt; createToolbar() // appelé 200 fois. Crée un élément DIV à chaque fois
       -&gt; createToolbarButton() // appelé 20 fois par <em>toolbar</em>, crée un élément SPAN à chaque fois</pre>

<p>Ainsi, au total ce code crée 200 objets <code><a href="/fr/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code>, et 4000 objets <code><a href="/fr/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code>.</p>