diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
commit | 39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch) | |
tree | 66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/tools/memory/dom_allocation_example | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2 translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip |
unslug fr: move
Diffstat (limited to 'files/fr/tools/memory/dom_allocation_example')
-rw-r--r-- | files/fr/tools/memory/dom_allocation_example/index.html | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/files/fr/tools/memory/dom_allocation_example/index.html b/files/fr/tools/memory/dom_allocation_example/index.html new file mode 100644 index 0000000000..0f3a4b04d6 --- /dev/null +++ b/files/fr/tools/memory/dom_allocation_example/index.html @@ -0,0 +1,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 < toolbarButtonCount; i++) { + var toolbarButton = createToolbarButton(); + toolbar.appendChild(toolbarButton); + } + return toolbar; +} + +function createToolbars() { + var container = document.getElementById("container"); + for (var i = 0; i < 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() + -> createToolbar() // appelé 200 fois. Crée un élément DIV à chaque fois + -> 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> |