Star the front-end canteen and eat every meal!

Because of the change in the recommendation mechanism of the official account, if you don’t want to miss the articles of the cafeteria, you can set the cafeteria as a star, so that it will appear in the top list of your official account. Set star method: first enter the public account background (click the blue word “front-end canteen” below the title of this article), then click the three dots in the upper right corner, you can see the set star.

foreword

With the development and popularization of the web, the front-end pages are not only loaded on the browser, but also gradually popular in the webview of various apps. Especially now that the device performance is getting better and better, the front-end page is beginning to play an important role in the app. As a result, the stay time of the front-end page becomes longer, and we should pay more attention to the memory management of the front-end to prevent memory leakage and improve the performance of the page.

If you want to create high-performance front-end applications and prevent crashes, you must understand the memory mechanism of JS, in fact, to understand the allocation and recovery of JS memory.

JS data storage mechanism

memory space

As can be seen from the figure, in the execution process of JavaScript , there are mainly three types of memory space, namely code space, stack space and heap space.

Code space : used to store executable code

Stack space : a contiguous memory area with small capacity and fast reading speed, designed as a first-in, last-out structure

Heap space : Discontinuous memory area, large capacity, used to store large data, slow reading speed

type of data

JavaScript has developed a total of eight data types, of which the Object type is called a reference type, the other seven are called basic types, and Object is the kv structure data composed of the remaining seven basic types.

stack space and heap space

The stack space is actually the call stack in JavaScript, which is used to store the execution context and small data in some basic types in the execution context, as shown in the following figure:

image.png

Variable environment: The variable space for storing var declarations and function declarations can be determined at compile time and is not affected by block-level scope

Lexical environment: The variable space for storing let and const declarations cannot be completely determined at compile time, and is affected by block-level scope

The heap space is used to store large data such as reference types, and then save their reference addresses to variables in the stack space, so with this additional transfer, JavaScript will naturally read heap space data than stack space data. The relationship between the two can be represented by the following figure:

Under normal circumstances, the stack space is not set too large, because the JavaScript engine needs to use the stack to maintain the state of the context during program execution. If the stack space is large, all data will be stored in the stack space, which will affect the to the efficiency of context switching, which in turn affects the execution efficiency of the entire program.

Closure

An inner function can always access the variables declared in its outer function. When an inner function is returned by calling an outer function, even if the execution of the outer function has ended, the variables that the inner function refers to the outer function are still stored in memory. The collection of these variables is called a closure

…

The post Talking About JS Memory Mechanisms and Memory Leaks first appeared on Lenix Blog .

This article is reprinted from https://blog.p2hp.com/archives/9915
This site is for inclusion only, and the copyright belongs to the original author.