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.