Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Exemple d'allocation DOM

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.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : maximelore
 Dernière mise à jour par : maximelore,