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
.