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,