Use the browser to test the memory footprint of several closures

@(Markdown and attached notes)[True biography] My Github github.com/zhuanyongxi…

The first part of this article is intended to prove that three closure examples understand the memory impact of closures.

There are 10 examples in total. Examples 7, 8 and 9 need attention.

Only Chrome was tested, Chrome version 67.0.3396.87 (official) (64-bit)

Case 1

var a = 12;
function fn() {
  var a = new Array(10000000).join('x');
  return function () {
    var b = 1+ a; }}var f = fn();
Copy the code

As a result, it takes up memory.

FIG. 1

Case 2

var oDiv = document.getElementById("div1");
~function() {
  var fn = function() {};
  fn.data = new Array(10000000).join('x'); oDiv.onclick = fn; } ();Copy the code

The result is the same as the figure above. If we change the example to:

var oDiv = document.getElementById("div1");
~function() {
  var fn = function() {};
  fn.data = new Array(10000000).join('x');
  // oDiv.onclick = fn;} ();Copy the code

The result is that the function fn in the local scope is destroyed.

Figure 2

Example 3

function fn(){
  var a = new Array(10000000).join('x');
  return function(){
    var b = 1 + a;
  }
}
fn();
Copy the code

As shown in Figure 2, the return function is not caught by the global variable.

Example 4

This is an example of delayed destruction.

function fn(){
  var a = new Array(10000000).join('x');
  return function(){
    var b = 1 + a;
  }
}
fn()();
Copy the code

Main breakpoint:

The memory test result is the same as figure 1.

Then let the program finish, and the result of the memory test becomes Figure 2.

Case 5

var fn;
function foo() {
  var a = new Array(10000000).join('x');
  function baz() {
    var b = 1 + a;
  }
  fn = baz;
}

foo();
Copy the code

The result is the same as figure 1.

Case 6

function fn() {
  var a = new Array(10000000).join('x')
  return function () {
    console.log("test"); }}var f = fn();
Copy the code

The result is the same as figure 2, not used by the returned function, destroyed.

Example 7

function fn() {
  var a = new Array(10000000).join('x')
  var b = new Array(10000000).join('x')
  return function () {
    var b = 1+ a; }}var f = fn();
Copy the code

As a result, as shown in figure 1, the variables used by the returned function are stored, and the unused variables are destroyed.

Example 8

function fn() {
  var a = new Array(10000000).join('x');
  
  function another() {
    var b = 1 + a;
  }
  
  return function() {
    console.log("test");
  };
}
var f = fn();
Copy the code

As shown in figure 1, the variable is not used by any function other than the return function, so there is still memory usage.

Example 9

function fn() {
  var a = new Array(10000000).join('x');
  return function(a) {
    var b = 1+ a; }}var f = fn();
Copy the code

The result is the same as figure 2, not occupied, and the variable A is actually redeclared.

Example 10

(function(a) {
  setTimeout(function() {
    var b = 1 + a;
  }, 0); }) (new Array(10000000).join('x'));
Copy the code

The result is the same as figure 1. Memory is occupied. These are used as interview questions:

for(var i = 1; i < 10; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, 0);
  })(i);
}
Copy the code

conclusion

Variables in a closure environment can have conditions stored in memory: a function is returned to be used (usually assigned to an external variable, examples 4 and 10 are another case), and variables in the execution environment of the function are used by the function in the execution environment.