Front - end interview leak -(13) memory leak

preface

This series started with preparing yourself for an interview. Later found more and more sorting, almost 120,000 characters, finally decided to share to everyone.

In order to share the sorting out, I spent a lot of time, at least three times as much time as ONLY myself. If you like, welcome to collect, follow me! Thank you very much!

The article links

Front – end interview check and fill gaps -(1) tremble and throttling
(2) Garbage collection mechanism
(3) Cross-domain and common solutions
(4) Front-end local storage
(5) Rendering mechanism and redraw and backflow
Front – end interview -(six) browser cache
(7) XSS attack and CSRF attack
(8) Front-end encryption
(9) HTTP and HTTPS
Check and fill gaps in front interview –(10) Front authentication
(11) Front-end software architecture pattern MVC/MVP/MVVM
(12) From the input URL to the page to see the whole process (including three handshake, four wave detailed explanation)
Front – end interview leak -(13) memory leak
Front – end interview omission and filling -(xiv) algorithm and sorting
(15) Event Loop

Collection of articles:

The Index (120,000 character collection) contains more than a dozen other articles in the series written so far. The following new value-added articles will not be added in each link, strongly suggest that the comments like, pay attention to the collection!!!! , thank you! ~

Follow-up Update Plan

Design pattern, front-end engineering, project process, deployment, closed loop, vUE often test knowledge and other contents will be added in the future. If you think the content is good, welcome to collect, follow me! Thank you very much!

Ask for an extrapolation

At present, I am also preparing for job-hopping. I hope you and HR sister can promote a reliable front-end position in Wuhan! Email :[email protected]. Thanks! ~

What is a memory leak?

The program needs memory to run. The operating system or runtime must supply memory whenever a program requests it.

For continuous daemons, memory that is no longer used must be released in time. Otherwise, the memory usage becomes higher and higher. The system performance is adversely affected, for example, the system becomes slow or has a large delay, or the process crashes.

This is called a memory leak, when memory that is not used any more is not released in a timely manner.

Memory leak identification methods

Use the F12 shortcut or Ctrl+Shift+J to open Developer Tools in Chrome.
Select the Performance TAB and select Memory only from the Capture TAB.
After setting, click the Record button on the left, and then you can visit the web page.
Open a website, such as www.taobao.com. When the page loads, click Stop and wait for the analysis results.
Then, look for the part of memory rapidly decreased in the Chart View, and View the corresponding Event Log, from which you can find the GC Log.

The specific process is shown in the figure below:

Common causes and handling methods of memory leaks

Common reasons:

1. Unexpected global variables

In the following code, the variable bar is inside the function foo, but bar is not declared. JS will make it a global variable by default, so it won’t be released until the page closes.

function foo(){
    bar=2
    console.log('bar is not declared! ')}Copy the code

If b is not declared, it will become a global variable and will not be released until the page closes. This can be avoided by using strict mode.

2. References still exist when dom is emptied

Many times, DOM nodes are temporarily stored in data structures for easy access. But forgetting to dereferent the DOM node when it is not needed can cause a memory leak.

var element = {
  shotCat: document.getElementById('shotCat')};document.body.removeChild(document.getElementById('shotCat'));
// If the element has not been reclaimed, removing the shotCat node here is useless; the shotCat node remains in memory.
Copy the code

Similarly, if the DOM node is bound to an event, but the event is not unbound when removed, then simply removing the DOM node is useless

3. Memory leaks in the timer

var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource)); }},1000);
Copy the code

If there is no cleanup timer, someResource will not be released, and if it happens to be consuming a large amount of memory, it can cause performance problems. But setTimeout, when it’s finished, the memory used by the object referenced in its callback can be reclaimed. Of course, there are some scenarios where the setTimeout may be very long, and in those cases you need to take it into account.

4. Improper use of closures

Take the following example: circular reference to each other. This is a common mistake, and sometimes not easy to spot.

function foo() { 
  var a = {}; 
  function bar() { 
    console.log(a); 
  }; 
  a.fn = bar; 
  return bar; 
};
Copy the code

Bar and A form a circular reference to each other. If you do not use console.log(a) in bar, there will be no reference and no memory leak. NONONO,bar as a closure, all variables in foo are implicitly referenced by bar even if there is nothing inside it. Even if there is nothing in bar that still causes circular references, the real solution is not to use a.fn = bar.

Avoidance strategies:

Reduce unnecessary global variables, or objects with a long life cycle, and timely garbage collection of useless data (that is, null);
Pay attention to program logic, avoid “infinite loop” and so on;
Avoid creating too many objects: Remember to return things when you don’t use them.
Reduce the level of excessive references

Memory leak in Node

Memory leaks in Node and JS in a slightly different way to deal with the details can be viewed in this article, very detailed!

Thanks and Reference

JavaScript memory leaks tutorial
V8 garbage collection mechanism

Front – end interview leak -(13) memory leak