Definition: Various problems caused by the heap memory that has been dynamically allocated in the program is not released or cannot be released for some reason.
Regarding possible memory leaks in js:
unexpected global variable
The life cycle of global variables is the longest in the page, and the memory on the global variables will never be reclaimed unless the page is closed.
When our global variables are used improperly, and we do not recycle them in time (manually assign null), or when we mount a variable to a global variable such as a typo, a memory leak may also occur.
Forgotten timer not cleared
We generally use setTimeout to start timers and setInterval (set Interval) to destroy them, so when timers are used on a certain page and the page is destroyed, if these timers are not manually released, then these timers still survive with.
That is to say, the life cycle of the timer is not attached to the page, so when a callback function is registered through the timer in the js of the current page, and the callback function holds a variable or some DOM elements, even if the page is destroyed, the page cannot be recycled normally due to the timer holding a partial reference to the page, resulting in a memory leak.
Improper use of closures
The function itself will hold a reference to the lexical environment in which it was defined, but usually, after the function is used, the memory allocated by the function will be reclaimed.
However, when another function is returned within the function, since the returned function holds the lexical environment of the external function, and the returned function is held by other life cycle things, the memory cannot be recovered even though the execution of the external function is completed.
Forgotten DOM elements still have references
The life cycle of a DOM element normally depends on whether it is mounted on the DOM tree. When it is removed from the DOM tree, it can be destroyed and recycled. But if a DOM element also holds its reference in js, then its life cycle is determined by both js and whether it is on the DOM tree. Remember that when removing it, both places need to be cleaned up to be recycled normally.
network callback
In some scenarios, if a network request is initiated on a certain page and a callback function is registered, and the callback function holds some content of the page, then when the page is destroyed, the network callback should be canceled; Part of the content of the page will also cause part of the content of the page to fail to be recycled.
Result: slowdowns, crashes, large delays, etc.
Brief description:
To summarize the possible memory leaks above:
(1) Global variables are not manually null
(2) The timer is not cleared
(3) There are other references in the closure, etc.
(4) DOM element forgetting and clearing
(5) Network callback