Is more heap memory or context created (stack execution => stack memory) better, or less?

  • The less the better, because the memory of the computer is fixed, and all the memory we open is occupying the resources of the computer. When the memory of the computer is consumed too much, the performance will become more and more slow (directly leading to the slow running of our products).

Mind mapping

Function execution will form stack memory (allocated space from memory), if the memory is not destroyed, it is easy to cause stack memory overflow (full memory, the computer is stuck), => so an important performance optimization point in JS: reduce memory usage

  • => Release the heap memory
  • => Free stack memory (i.e., make the context of the stack execution as free as possible)

HEAP memory and STACK memory

1. HEAP memory

  • Heap memory is used to store values of reference data types
    • (For example, creating functions and creating objects creates a heap into which code strings or key-value pairs are stored.)

2. STACK memory

  • Stack memory is used to execute code and store basic type values (created variables are also stored on the stack).
    • Not only global code execution (EC(G) global execution context),
    • Also, function execution (EC(X) private context) is eventually pushed to the stack
    • The block scope based on let/const in ES6 is also stack memory

2, common browser garbage collection mechanism (memory release mechanism) :

1. Find references (Weblit kernel)

The browser has an automatic garbage collection mechanism, which collects all unused memory at regular intervals. (This garbage collection mechanism is better than other languages.)

-1). Conditions that will not be destroyed:

  • Create a heap (hexadecimal address) :
    • If a variable or other object stores the address of heap memory, the current heap memory is considered occupied and cannot be freed for destruction
  • Context push execution;
    • If something in the current context (typically the heap created in the current context) is occupied by variables or other transactions outside the context, the current context cannot be released from the stack (but in general, the context itself is released after the code in the context executes)

-2). Heap memory is freed

If we run out of heap memory and want to release it manually, cancel all usage: assign NULL (NULL is a pointer to an empty object, i.e. does not point to any heap memory)

//=> To create a reference type value, a heap is created
// If the heap currently created is not occupied by anything else (the browser will look for references to each memory when it is free, and the unused memory will be reclaimed), then the heap will be freed
let obj = {
    name : 'xiaozhima'
};
let oop = obj;
// Obj and OOP are both using the heap memory of the object. To free the heap memory, you need to manually unassociate variables and values (null: null object pointer).
obj = null;
oop = null;
Copy the code

-3). Stack memory release

Stack memory:

  • The global scope created by opening the browser is the stack memory
  • The private scope created by manually executing functions is the stack memory
  • The block scope based on let/const in ES6 is also stack memory
  • .

Stack memory destruction:

  • Global stack memory: destroyed only when the page is closed
  • Private stack memory:
    • 1. In general, the private stack memory created by the function will be destroyed and freed as soon as it completes execution (excluding infinite recursion and infinite loop).
    • 2. But once the stack memory of something (usually addresses) occupied by private things outside the scope of the current private stack memory cannot be released immediately destroyed (features: private scope of information such as private variables also retained = > this function cannot be released private stack memory, also called closures)
function fn(){
    / /...
}
fn(); //=> Execute the function to form the stack memory, execute to complete the stack memory destruction
     
function X(){
    return function(){
        / /...}}let f=X(); //=>f occupies one item in X execution stack memory (return the heap corresponding to the small function), then X execution stack memory can not be freed
Copy the code

2. Memory counter mode (Trident kernel)

The current memory is referenced by something else, and the heap is counted by 1 (cumulative count). When the memory is unencumbered, it is reduced by 1. When it reaches zero, the browser can free it

3. Exercises

1. Output the result

var i = 5;
function fn(i) {
	return function (n) {
		console.log(n + (++i));
	}
}
var f = fn(1);
f(2);
fn(3)(4);
fn(5)(6);
f(7);
console.log(i);
Copy the code

2. Output the result

let x = 5;
function fn(x) {
    return function(y) {
        console.log(y + (++x)); }}let f = fn(6);
f(7);
fn(8) (9);
f(10);
console.log(x);
Copy the code

3. Output the result

let a=0,
    b=0;
function A(a){
    A=function(b){
        alert(a+b++);
    };
    alert(a++);
}
A(1);
A(2);
Copy the code

4. Output the result

var n=0; 
function a(){
    var n=10; 
    function b(){
        n++; 
        console.log(n); 
    }
    b();
    return b; 
}
var c=a();
c(); 
console.log(n);
Copy the code

5. Output the result

var test = (function(i){
    return function(){
        alert(i*=2);
    }
})(2);
test(5);
Copy the code