This is the 26th day of my participation in the August More Text Challenge.

Memory leaks and optimization

  • When developing code in JavaScript, memory leaks and optimizations should always be considered. Memory leak refers to the situation in JavaScript that the objects that have allocated the heap memory address are not released or cannot be released for a long time, which occupies the memory for a long time. As a result, the memory is wasted and the response speed of the running application becomes slow and eventually crashes. This is a memory leak, and you’ve probably encountered it in your daily browser development and use, so let’s review the memory leak scenario:

  • Too much cache is not released.

  • Too many unreleased closures;

  • Timer or callback too many not released

  • Too many invalid DOM unreleased;

  • Too many global variables are not found.

I’ve outlined a few scenarios that can cause memory leaks during development or usage, so that your browser freezes, doesn’t respond, doesn’t open pages, etc. So how can these problems be optimized? Let’s take a look at what to look for in each of these scenarios.

  1. Reduce unnecessary global variables and use strict patterns to avoid accidentally creating global variables. Such as:
function foo() {
    // Global variables => window.bar
    this.bar = 'Default this to global';
    // No variables declared, actually global variables =>window.bar
    bar = 'Global variable'; 
}
foo();
Copy the code

In this code, there are too many this variables bound inside the function. Although there is no problem at first sight, after careful analysis, in fact, the properties under this are all global variables bound to the window by default, which is very necessary to pay attention to.

  1. Dereference (variables in closures, DOM references, timer cleanup) when you’re done with the data. Such as:
var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
        // The timer is not cleared, it can be cleared
    }
    // Node/someResource stores a large amount of data and cannot be recycled
}, 1000);
Copy the code

For example, there is no code to clear setInterval in the above code. If there is more code like this, it will take up too much memory, which should also be noted.

  1. Organize your code logic to avoid endless loops that cause browsers to freeze and crash. For example, for some of the more expensive objects that provide a manual way to free memory, look at the following code:
var leakArray = [];
exports.clear = function () {
    leakArray = [];
}
Copy the code

For example, this code provides a way to empty the contents of the array, which can then be freed according to the appropriate business timing. In this way, the problem of memory overflow caused by too much object data can be avoided.

As for memory leaks, if you want to better troubleshoot and avoid problems in advance, the best way to solve the problem is to skillfully use Chrome’s memory profiling tool, Chrome helps you analyze the reserved memory snapshot, to see the objects that continue to occupy a large amount of memory. It is best to analyze and diagnose business code before it goes live before you can ensure the quality of your online business.