This is the fifth day of my participation in the August More Text Challenge. For details, see: August More Text Challenge **

Recently in the process of writing small programs, with a lot of the console, log, began to alignment is convenient, has not been deleted, lead to the page have caton phenomenon appear from time to time, began to feel to refresh the page, but the product and the test will not allow ah, later, for the problems, only to find the page in a lot of kinds of memory leaks, Think of the interview before when this question is also tested many times, has not summed up, today take the opportunity to sum up or remind yourself usually pay more attention.

What is a memory leak?

First of all, we need to know what is a memory leak. In the engine, there is a garbage collection mechanism, mainly for some objects that are no longer used in the program, clean up the collection to free memory, but in fact, the garbage collection mechanism does not recycle all the objects that are no longer used. Therefore, we should actively avoid some operations in the code that are not good for the engine to do garbage collection. These object Memory is not reclaimed in time, we call it Memory Leak.

Common memory leaks

Take a look at some common memory leaks:

Improper closures

Most people think of closures as nesting functions inside and returning a function. I looked at several books to describe them:

  • JavaScript Advanced Programming: CLOSURES are functions that have access to variables in the scope of another function.
  • The Definitive Guide to JavaScript: Technically, all JavaScript functions are closures, they are all objects, and they are all associated with a chain of scope.
  • JavaScript you don’t know: Closures occur when a function can remember and access the lexical scope in which it is located, even if the function is executed outside the current lexical scope.

Closures have a wide range, so let’s look at a general example of closures:

function fnOne(){
  let test = new Array(1000).fill('www')
  return function(){
    console.log('hahaha')}}let fn1Child = fnOne()
fn1Child()
Copy the code

In this case, because the return function has a reference to the test variable in function fnOne, test will not be reclaimed, thus causing a memory leak.

What’s the solution? After the function is called, the external reference is left blank:

function fnOne(){
  let test = new Array(1000).fill('www')
  return function(){
   console.log(test)
   return test
  }
}
let fn1Child = fnOne();
fn1Child()
fn1Child = null;
Copy the code

Reduce the use of closures. Improper use of closures can cause memory leaks.

An implicit global variable

In JavaScript, garbage collection is performed automatically, but for global variables, it is difficult for the garbage collector to determine when they are not needed, so global variables are not collected, and there is a memory leak:

function fn(){
  // There is no declaration to create the implicit global variable test1
  test1 = new Array(1000).fill('isboyjc1')
  
  // Inside the function this points to window, creating the implicit global variable test2
  this.test2 = new Array(1000).fill('isboyjc2')
}
fn()
Copy the code

Forgetting timer

let someResource = getData()
setInterval(() = > {
  const node = document.getElementById('Node')
 if(node) {
    node.innerHTML = JSON.stringify(someResource))
 }
}, 1000)
Copy the code

The code puts the data into the node every second, but neither the variables in the callback function nor the callback function itself can be reclaimed until the setInterval ends. ClearInterval is required to clear the timer to reclaim someResource.

The same is true of setTiemout, which is cleared in a timely manner when no time is needed.

Forgotten event listeners

In the code we would use the event listener, mount related functions within the component, the component destroyed when not actively remove, one of the variables and functions can be considered as needed, will not be recycled, these internal reference variable stores a large amount of data, it will cause page too much memory, causing the memory leak.

Forgotten listener mode

Whether it is Vue or React, it is common for the listener mode to implement some message communication, such as EventBus. When we implement the listener mode to mount related functions in the component, the component is not actively cleared when the component is destroyed, and it will not be recycled. This is the time to clean up in the beforeDestroy component destruction lifecycle.

Uncleaned Console output

Finally, there is console.log, which is common in debugging. We can see the data output in the browser console, and the memory leak is caused by the output of the object.

With the common memory leaks out of the way, the next article will talk about how to check for a memory leak in the locating code.