blob: db9a1f2c71874688f9edaa271a6388a0b4e01b67 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
# DOM allocation example
This article describes a very simple web page that we\'ll use to
illustrate some features of the Memory tool.
You can try out the site at
<https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html>.
It just contains a script that creates a large number of DOM nodes:
```js
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");
// stop Spidermonkey from sharing instances
toolbarButton[getRandomInt(0,5000)] = "foo";
return toolbarButton;
}
function createToolbar() {
var toolbar = document.createElement("div");
// stop Spidermonkey from sharing 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();
```
A simple pseudocode representation of how this code operates looks like
this:
createToolbars()
-> createToolbar() // called 200 times, creates 1 DIV element each time
-> createToolbarButton() // called 20 times per toolbar, creates 1 SPAN element each time
In total, then, it creates 200 `HTMLDivElement` objects, and 4000
`HTMLSpanElement` objects.
|
