Warning: this code will eventually exhaust your browser tab's memory and crash the tab.

In the following fiddle, I have set up a process that leaks a lot of memory and continuously reports how much memory is being used. I am using the performance.memory API, which only seems to be implemented on chrome. The problem is that the amounts reported never change, despite the fact that memory usage is rapidly increasing. Instead, I would expect the number on top to continually increase.

Here is the javascript code:

(function() {

var x = [];

function createSomeNodes() {
    var div,
        i = 100,
        frag = document.createDocumentFragment();
    for (;i > 0; i--) {
        div = document.createElement("div");
        div.appendChild(document.createTextNode(i + " - "+ new Date().toTimeString()));
        frag.appendChild(div);
    }
    document.getElementById("debug").appendChild(frag);
}

function clear() { document.getElementById('stats').innerHTML = ''; }

function show(stat) { 
  var div = document.getElementById('stats');
  div.appendChild(document.createTextNode(stat));
  div.appendChild(document.createElement("div"));
 }

var start = Date.now() + 2 * 1000;

function grow() {
    x.push(new Array(1000000).join('x'));
    createSomeNodes();
    setTimeout(grow,40);

if (Date.now() < start) { return; }

              (function() {
                clear();
                var pm = window.performance && window.performance.memory;
                if (!pm) {
show("no performance.memory api");
                  return;
                }
                var lim = pm.jsHeapSizeLimit, // Memory the JavaScript heap is limited to
                    // Memory allocated on the JavaScript heap (includes free space)
                    total = pm.totalJSHeapSize,
                    used = pm.usedJSHeapSize; // Memory currently being used 
                show("Crash Index (% of Heap Limit Allocated): " + Math.round(total / lim * 100));
                show("% of Allocated Memory Used: " + Math.round(used / total * 100));
              })();

}


    setTimeout(grow,1000);
})()

If I set the variable start to a higher number, I see a higher initial value for what I have called the "crash index," but after it is first shown, even this value does not increase.

Warning: this code will eventually exhaust your browser tab's memory and crash the tab.

In the following fiddle, I have set up a process that leaks a lot of memory and continuously reports how much memory is being used. I am using the performance.memory API, which only seems to be implemented on chrome. The problem is that the amounts reported never change, despite the fact that memory usage is rapidly increasing. Instead, I would expect the number on top to continually increase.

Here is the javascript code:

(function() {

var x = [];

function createSomeNodes() {
    var div,
        i = 100,
        frag = document.createDocumentFragment();
    for (;i > 0; i--) {
        div = document.createElement("div");
        div.appendChild(document.createTextNode(i + " - "+ new Date().toTimeString()));
        frag.appendChild(div);
    }
    document.getElementById("debug").appendChild(frag);
}

function clear() { document.getElementById('stats').innerHTML = ''; }

function show(stat) { 
  var div = document.getElementById('stats');
  div.appendChild(document.createTextNode(stat));
  div.appendChild(document.createElement("div"));
 }

var start = Date.now() + 2 * 1000;

function grow() {
    x.push(new Array(1000000).join('x'));
    createSomeNodes();
    setTimeout(grow,40);

if (Date.now() < start) { return; }

              (function() {
                clear();
                var pm = window.performance && window.performance.memory;
                if (!pm) {
show("no performance.memory api");
                  return;
                }
                var lim = pm.jsHeapSizeLimit, // Memory the JavaScript heap is limited to
                    // Memory allocated on the JavaScript heap (includes free space)
                    total = pm.totalJSHeapSize,
                    used = pm.usedJSHeapSize; // Memory currently being used 
                show("Crash Index (% of Heap Limit Allocated): " + Math.round(total / lim * 100));
                show("% of Allocated Memory Used: " + Math.round(used / total * 100));
              })();

}


    setTimeout(grow,1000);
})()

If I set the variable start to a higher number, I see a higher initial value for what I have called the "crash index," but after it is first shown, even this value does not increase.

• javascript
• google-chrome
• memory

• I did a version of your code with a "STOP" button to prevent crashing the tab. Now I'm going to check what is going on. jsfiddle/x3d48ja0/7 – João Mosmann Commented Aug 19, 2014 at 17:23
• 1 Check this. peter.sh/experiments/chromium-mand-line-switches search for performance.memory This should work – João Mosmann Commented Aug 19, 2014 at 18:09
• Indeed! --enable-precise-memory-info ; Add this answer and I will accept. – Lyn Headley Commented Aug 19, 2014 at 18:28

2 Answers 2

For security reasons, Google Chrome doesn't provide precise information via performance.memory by default.

So, you have to open your browser via terminal with this flag --enable-precise-memory-info, to allow Google Chrome to show precise information about your puter.

There was a limitation that would restrict memory sampling to once every 20 minutes in Google Chrome for security reasons. In Chrome 68+ that limit has been reduced to once every 50ms for scripts served from the same origin as the webpage (eTLD+1). This means you probably don't need --enable-precise-memory-info anymore.

https://chromium.googlesource./chromium/src/+/7c7847f69de403f6c798dfccba10812039a60480