This is the first blog of the JavaScript advanced series of knowledge points, as long as the introduction of JavaScript memory management related knowledge, hope to enhance the knowledge point understanding and self-control through sharing

[toc]

Why should the front end focus on memory

  1. Any program needs memory to run, and for a page, memory that is no longer used is not released in time. This phenomenon is called a memory leak.
  2. A memory leak may not seem to matter much, but memory accumulation can cause memory overflow. Memory overflow Simply put, we need more memory than available memory, when our program will run out of memory errors, resulting in a long time of webpage unresponsiveness or crash.
  3. Essentially, a memory leak is a waste of memory due to an oversight or error that causes a program to fail to free heap memory that is no longer in use.

Second, garbage recycling mechanism

  1. Low-level languages like C typically have low-level memory management interfaces, such as malloc() and free() for allocating and freeing memory.
  2. With JavaScript, memory is allocated when variables (objects, strings, etc.) are created and “automatically” freed when they are no longer used, a process called garbage collection
  3. Find variables that are no longer in use and release their memory, which the garbage collector does periodically at regular intervals

Three, the advantages and disadvantages of garbage recovery mechanism

  • JavaScript uses garbage collection to automatically manage memory, and garbage collection is a double-edged sword;
  1. Advantages: It can greatly simplify the memory management code of the program, reduce the programmer’s burden, and reduce the memory leakage problem caused by long running
  2. Disadvantages: means programmers will have no control over memory,JavaScript does not expose any memory apis. We can’t force it to do garbage collection, and we can’t interfere with memory management

Memory life cycle

  1. Allocate memory: When we declare variables, functions, and objects, the system automatically allocates memory for them
  2. Use memory: use variables, functions
  3. Release memory: The garbage collection mechanism automatically reclaims unused memory

Recycling strategy of garbage collection mechanism

  • There are two methods of garbage collection commonly used by major browsers today: tag scavenging and reference counting

01- Reference Counting (Reference Counting)

  1. Definition: Keeps track of how many times each value is referenced. If the number of times a value is referenced is 0, the value is no longer needed and can therefore be freed
  2. Principle: Each time a reference is incremented by one, it is decrement by one when it is released. When the number of references of this value becomes 0, the memory space can be reclaimed
  3. Example:
1 const obj = { a:10 }; / / reference + 1
2 const obj1 = { a:10 }; / / reference + 1
3 const obj = {}; // reference minus 1
4 const obj = null; // Reference is 0
Copy the code
  • process
    1. We declare a variable and assign the value of a reference type to the variable. The number of references to the value of the reference type is 1
    2. The same value is assigned to another variable, and the number of references to that value is increased by one
    3. When a variable containing a value of this reference type is assigned to another value, the number of references to that reference type is reduced by one
    4. When the number of references becomes zero, there is no way to access the value
    5. The next time the garbage collector runs, it frees memory for values with zero references
  1. There is a big problem — circular references cannot be recycled 
    // Circular reference
function fn() {
    var objA = { a: 10 };
    var objB = { b: 10 };
    objA.c = objA;
    objB.d = objB;
}
Copy the code

IE8 browsers had this problem before, and now the mainstream browsers almost use tag clearing

02- Mark clearance

  1. define

    1. Tag clearance refers to when a variable enters the environment, the variable is marked “enter the environment “;
    2. When a variable leaves the environment, it is marked as “out of the environment “;
    3. Finally, the garbage collector completes the memory cleanup, destroying the tagged values and reclaiming the memory they occupy;
    4. At present, the mainstream tourist is marked clear, but the time is different
    	function foo () {
    var a = 10; // is marked to enter the environment
    var b = 'hello'; // is marked to enter the environment
	}
	foo(); // After execution,a and B are marked to leave the environment and the memory is reclaimed
Copy the code

  2. The execution environment

    • The execution environment defines other data that variables or functions have access to, determining their respective behavior.
    • Each execution environment has a variable object associated with it. All variables and functions defined in the environment are stored in this object.
    • The parser identifies and marks these environments

  3. Global execution environment

    • The outermost execution environment
    • The object representing the execution environment varies according to the host environment. In the viewer, the global execution environment is considered a Window object
    • Global variables and functions are created as properties and methods of the Window object
    • After all the code in an execution environment has been executed, the environment is destroyed, along with all variables and function definitions stored in it
    • Global until the end of the application, e.g. close the web page or browser

  4. Environment Stack (local)

    • Each function has its own execution environment.
    • When the execution stream enters a function, the function’s environment is pushed onto an environment stack.
    • After the function is executed, the stack pops up its environment, returning control to the previous execution environment.
    • It is this grid mechanism that controls the flow of execution in ECMAScript programs

Six, the occupation of memory

  • To check the memory usage on Chrome, perform the following steps.

1. Open the Developer Tools and select the Memory panel. 2. 3. Perform various operations on the page to simulate user usage. 4. After a period of time, click the Stop button in the dialog box, and the memory usage during this period will be displayed on the panel.Copy the code

Last word: Self-discipline is knowing what you want and wanting it strongly enough