Sunday, March 1, 2015

Memory Management in the Browser

Memory management is one of the most fundamental concepts you'll learn throughout your career as a software developer. I don't feel as if it's something you can ever really close the book on. Because memory can be impacted by a near endless combination of factors, you'll revisit this problem time and time again.

What is Garbage Collection?

Garbage collection is a process that runs in the background, targeting objects that are no longer needed by the program and freeing up memory. Not all languages have a garbage collector, but when dealing with JavaScript, expect it to run automatically and unpredictably.

To prepare an object for garbage collection, you have to remove all references to that object. In this context, the term "object" is anything stored in memory, whether it be a variable or a function. Let's use the following code to illustrate:

function foo() {
    var bar = new Bar();


After the function is called, the object that the variable bar points to will be eligible for garbage collection since it doesn't exist outside the scope of the function and there are no references to it. Contrast this with the following example, where we return bar and store it into a variable.

function foo() {
    var bar = new Bar();
    return bar;

var b = foo();

The bar object will now persist during the next rounds of 
garbage collection because of the reference b. We can remove
this reference by setting b to null.

b = null;

What Exactly is a Memory Leak?

Memory leaks occur when the browser is unable to free up resources from unused objects. Healthy memory usage is indicated by a sawtooth pattern, where resources are being allocated and then released at varying intervals.

Profile for a memory leaking function

In the following example, unhealthy patterns are indicated by a steep increase in memory consumption.

Unhealthy patterns are indicated by a steep increase in memory consumption

Profile for a healthy particle generator

This example demonstrates memory being released properly at specific intervals.

Healthy memory usage

What causes memory leaks in the browser?

As we've mentioned before, it could be a variety of things. Let's go over the most common sources.

The Web Page

While memory leaks resulting from the web developer's code can often be remedied by reloading the page, this will frustrate your users to no end. Worst case scenarios involve the user having to shut down the browser, entirely. Best to get ahead of this and exercise good programming practices that allow resources to free up, accordingly. We'll cover these practices in future articles in the series.

Browser Plugins and Add-ons

Reloading the page will do nothing to alleviate memory leaks caused by plugins. Before debugging your web page or app in the browser, make sure to run the program with add-ons disabled, just to get that out of the way. Add-on programmers should also be following the same good programming practices, and keep memory in mind.

Other Sources of Memory Leaks

Sometimes memory leaks happen outside the browser. Make sure to check your memory usage through OS-level profiling tools, as well. Addressing memory issues from the server or the OS is outside the scope of these articles, but it never hurts to be aware of them.

That about covers it for the introduction. The next article in this series will cover profiling tools in the various browsers and, as we continue, you'll see more and more code samples that impact what the profilers return. Getting comfortable with these tools and concepts, early on, is essential.

No comments:

Post a Comment