Wrong understanding: No need to care for JavaScript and jquery memory management

Low-level languages such as C, which have lower levels of memory management commands, such as malloc () and free (), require the developer to manually release the memory. However, high-level languages such as JavaScript are different, and objects (objects, strings) allocate memory when they are created, and when they are not in use, the memory is automatically reclaimed, and the process of automatic recycling is called garbage collection. Because of the existence of garbage collection, high-level language developers such as JavaScript have made a mistake to realize that they can not care about memory management. Here's a look at the mechanism of memory recycling:

One, memory life cycle
Regardless of the programming language, the memory life cycle is basically the same: allocate the memory you need, use him for read and write operations, and release resources when memory is not needed.

Step 1 and Step 2 are the same for all languages and can be clearly perceived. As for step 3, the low-level language needs to be explicitly executed by the developer. And for high-level languages like JavaScript, this part of the operation is done to the parser, so you won't be aware of it.

Second,memory leaks in JavaScript

A memory leak refers to a piece of allocated memory that cannot be used or recycled until the browser process ends. A memory leak occurs because of a bug in the browser garbage collection method.

Iii. What are the main causes of memory leaks in JavaScript?

1) Circular Reference

A very simple example: A DOM object is referenced by a JavaScript object while referencing the same or other JavaScript object, which can cause a memory leak. The reference to this DOM object will not be reclaimed by the garbage collector when the script is stopped. To break a circular reference, the reference to the object or DOM object referencing the DOM element needs to be assigned a value of NULL.

2) JavaScript closures

Because of the limitations of JavaScript scopes, many implementations rely on JavaScript closures.

Closures can cause memory leaks because internal methods maintain a reference to external method variables, so even though the method returns an internal method, it can continue to access the private variables defined in the external method. The best thing for a JavaScript programmer is to disconnect all event handlers before the page reloads.

3) Dom Insertion Order

When 2 different ranges of DOM objects are added together, a temporary object is created. When this DOM object changes scope to document, the temporary object is useless. That is, DOM objects should be added in the order of the topmost dom elements that exist from the current page until the rest of the DOM elements, so that they always have the same scope and do not produce temporary objects.

4) How to detect?

Memory leaks are generally difficult for developers to detect because they are caused by unexpected errors in a large amount of code, but it does not affect the functionality of the program until the system is low on memory. That's why someone collects application performance metrics to test performance over a long period of testing.

The simplest way to detect memory leaks is to use Task Manager to check memory usage. Open the app in a new Chrome tab and see if memory usage is growing. There are other debugging tools that provide memory monitors, such as the chrome developer tools. This is a tutorial on the features of the heap analysis in Google's Web site.

Iv. shortcomings of jquery

One drawback of good jquery is that it is relatively easy to contaminate the DOM structure, resulting in a memory leak. The Remove () and empty () methods can be used to delete nodes on the DOM structure, and the deleted nodes are just the nodes of the free DOM, in case recovery is resumed again, but the occupied memory space cannot be freed . The problem I encountered was using jquery to insert <p> content </p> in real time, and as a result, memory grew as the number of insertions increased. Finally, the use of native JS, it solved.

Reference:

Http://www.jb51.net/article/32612.htm

Http://www.php100.com/html/webkaifa/javascript/2012/0504/10356.html

Wrong understanding: No need to care for JavaScript and jquery memory management