From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../tools/memory/dom_allocation_example/index.html | 54 ++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 files/fr/tools/memory/dom_allocation_example/index.html (limited to 'files/fr/tools/memory/dom_allocation_example') 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 +--- +
{{ToolsSidebar}}

Cet article décrit une page web très simple qui sera utilisée pour illustrer certaines fonctionnalités de l'outil Mémoire.

+ +

Il est possible de visiter le site à l'adresse : https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html.

+ +

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

+ +
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();
+ +

Voici une représentation en pseudo-code de ce que fait ce code :

+ +
createToolbars()
+    -> createToolbar() // appelé 200 fois. Crée un élément DIV à chaque fois
+       -> createToolbarButton() // appelé 20 fois par toolbar, crée un élément SPAN à chaque fois
+ +

Ainsi, au total ce code crée 200 objets HTMLDivElement, et 4000 objets HTMLSpanElement.

-- cgit v1.2.3-54-g00ecf