index.rst (1934B)
1 ====================== 2 DOM allocation example 3 ====================== 4 5 This article describes a very simple web page that we'll use to illustrate some features of the Memory tool. 6 7 You can try out the site at https://firefox-devtools.github.io/performance-scenarios/dom-allocs/alloc.html. 8 9 It just contains a script that creates a large number of DOM nodes: 10 11 .. code-block:: javascript 12 13 var toolbarButtonCount = 20; 14 var toolbarCount = 200; 15 16 function getRandomInt(min, max) { 17 return Math.floor(Math.random() * (max - min + 1)) + min; 18 } 19 20 function createToolbarButton() { 21 var toolbarButton = document.createElement("span"); 22 toolbarButton.classList.add("toolbarbutton"); 23 // stop Spidermonkey from sharing instances 24 toolbarButton[getRandomInt(0,5000)] = "foo"; 25 return toolbarButton; 26 } 27 28 function createToolbar() { 29 var toolbar = document.createElement("div"); 30 // stop Spidermonkey from sharing instances 31 toolbar[getRandomInt(0,5000)] = "foo"; 32 for (var i = 0; i < toolbarButtonCount; i++) { 33 var toolbarButton = createToolbarButton(); 34 toolbar.appendChild(toolbarButton); 35 } 36 return toolbar; 37 } 38 39 function createToolbars() { 40 var container = document.getElementById("container"); 41 for (var i = 0; i < toolbarCount; i++) { 42 var toolbar = createToolbar(); 43 container.appendChild(toolbar); 44 } 45 } 46 47 createToolbars(); 48 49 A simple pseudocode representation of how this code operates looks like this: 50 51 .. code-block:: JavaScript 52 53 createToolbars() 54 -> createToolbar() // called 200 times, creates 1 DIV element each time 55 -> createToolbarButton() // called 20 times per toolbar, creates 1 SPAN element each time</pre> 56 57 In total, then, it creates 200 `HTMLDivElement <https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement>`_ objects, and 4000 `HTMLSpanElement <https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement>`_ objects.