docs/demos/memory/example1.html

{{+bindTo:partials.standard_devtools_article}}
<!DOCTYPE html>
<h1>Example 1</h1>


  <h1>Example 1: Watch the memory grow</h1>
  <ol>
    <li>Open DevTools</li>

    <li>Select Timeline Tab</li>

    <li>Select Memory</li>

    <li>Record</li>

    <li>Push The Button</li>

  </ol><button onclick="grow()">The Button</button>

  <div id="nodes" style="display:none"></div>
<script>
var x = [];

function createSomeNodes() {
    var div,
        buf,
        i = 100,
        frag = document.createDocumentFragment();
    for (; i > 0; i--) {
        div = document.createElement('div');
        buf = document.createTextNode(i + ' - ' + new Date().toTimeString());
        div.appendChild(buf);
        frag.appendChild(div);
    }
    document.getElementById('nodes').appendChild(frag);
}
function grow() {
    x.push(new Array(1000000).join('x'));
    createSomeNodes();
    setTimeout(grow, 1000);
}
</script>

  <hr>
  <pre>
var x = [];

function createSomeNodes() {
    var div,
        i = 100,
        frag = document.createDocumentFragment();
    for (;i &gt; 0; i--) {
        div = document.createElement("div");
        div.appendChild(document.createTextNode(i + " - "+ new Date().toTimeString()));
        frag.appendChild(div);
    }
    document.getElementById("nodes").appendChild(frag);
}
function grow() {
    x.push(new Array(1000000).join('x'));
    createSomeNodes();
    setTimeout(grow,1000);
}
</pre>
{{/partials.standard_devtools_article}}