Talking about the Memory Optimization of Web Applications

As the Web application has become more complex, many web applications will run for a long time, and many web applications will run, and JavaScript’s memory management is more important.

JavaScript has a mechanism for automatically reclaiming garbage. The Executive Environment will be responsible for managing the memory used in the execution environment, releases the memory occupied by some of the variables that are no longer used. For most cases we are at the front end. When developing, it is not so concerned about how much memory usage, is reasonable, and it is necessary to optimize.

There are many important knowledge points in JavaScript foundation that are related to memory, such as deep copy and shallow copy, closing, prototype, reference data type, and reference transfer.

Of course, there is a very detailed explanation of many professional articles about JS’s memory space and memory-related knowledge.

For example, knowledge about JS memory space can be taken: Memory Space Detailed Graphics

About the knowledge of memory cycle and garbage recycling can read the article of the MDN, other articles are not more than this paper: Memory_Management

About JavaScript memory leaks can also take a look at the article JavaScript memory leak tutorial

In web application development, we should pay attention to:

1. Avoid no need for the use of global variables

The front-end developer knows that in a local scope, when the function is executed, the local variable does not exist, it is easy to be recycled by the garbage collector, when using the global variable definition value, the garbage collector is very difficult Judging how the global variable needs to release the memory space, so it will not be recycled and destroyed. And the variable will always exist in the old bongeon memory until the page is turned off.

1

2

3

4

5

6

Seduce

8

9

FunctionSetName () {

Name “alloy”;

}

// Isometric

FunctionSetName () {

Window.name “alloy”

}

Another unexpected situation is;

1

2

3

4

5

FunctionSetName (Name) {

THIS.NAMENAME;

}

SetName (“alloy”);

We can avoid some unexpectedly created global variables at the beginning of the JS file.

2. Timely release reference

If a global variable must be stored to store a lot of data, be sure to assign it to NULL after running.

The Delete operator is used to delete an attribute of the object; if it is not a reference to this property, it will eventually release it.

Note, try not to use DELETE in a function that requires intensive operations, which is likely to trigger the browser in an inappropriate GC, like other languages, JavaScript’s GC policy cannot stop responding to other GCs. Operation, while JavaScript GC is 50ms or more, it is ok, if it is a web application or game for operation, it is troubled.

1

2

3

4

5

6

Seduce

8

9

10

Constructionom {

Desks: 10,

Chairs: 22

}

Console.log (room.desks); // 10;

DELETEROW.DESKS;

Console.log (room.desks); // Undefined

Sometimes we use RemoveChild to remove Button, but also saves #button reference in the Node object, and the DOM element is still in memory, you need to be released in time.

1

2

3

4

5

Varnode {

Button: Document.getlementByid (‘Button’);

}

Document.body.removechild (Document.getElementByid (‘Button’));

3. Reduce the creation of objects

Garbage recycling periodically, if there is a lot of memory allocated, or if you create a lot of instances, then the recycling work will work hard.

Try to avoid cycling using a New object in a regularly called, and it has to take time to garbage recycling and processing of these objects.

The enjoyment element in the design mode is to reduce the object’s multiple creation. In the range we can control, the maximum reuse object is maximized. 4. Memory is not a cache

The slowness of the demand development is pushed, but many times we will slow memory in memory, leading to our memory occupancy, and the memory is developed to any program. If it is not very important, Don’t put it directly in memory, or develop expired mechanisms, automatically destroy expired cache.

5. Avoid complex recursive calls;

Typically, simple recursive calls are not yet caused by stack overflow, but when they are complex and need to store large amounts of information in the stack each time, thousands of such spaces are accumulated, and it is easy to exceed the stack. space.

6. Reasonable use of indexeddb

In fact, this is not very big and the JS relationship is very important, but I have encountered a user case, because of the long-term local data writing, and some reported logs are not cleared in time, leading to users The indexeddb stored in the browser is up to 12GB, and the browser can initialize indexeddb and read the local stored data when accessing the corresponding domain name, and the browser has skyrocketed, and finally crashed. Over-relying on indexeddb, no brain written data without performing regular cleaning.

Summarize

This share mainly summarizes some of our situations and attention to Web applications and may encounter.

Many times we will avoid many problems as we pay more when we encode.