× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to use Static Memory JavaScript with Object Pools?

This tutorial has been designed to help you implement some sort of memory management for JavaScript, by the use of Object Pools. This is often the requirement in case of high-performance applications that need to cut down on the usage of Garbage Collectors.

Whether it is an application on the web or a game, performance is the most critical aspect of it. Very often, as a developer, you might have to encounter one or more mails stating that your app or game has been performing below par after a certain time period. So, you obviously dig up the code that you have written and don’t really come across issues, until Chrome’s memory performance tool shows you the picture similar to the one provided below.

Figure 1. Memory performance graph

If you have a graph with the saw-tooth pattern, it represents a grave performance issue. And, as the usage of memory keeps increasing for you application or game, you’ll also likely notice the chart area to be growing. So when the chart encounters a sudden dip, it is an instance when the Garbage Collector enters the fray and then cleans up all the referenced memory objects.

Figure 2. Garbage collector working

Take a look at the above graph and you shall see how there seems to be a lot of Garbage Collection instances taking place. As such, these can be very harmful for the performance of your web applications or games. In the tutorial given below, we take a look at how you can warrant more control over memory, such that it doesn’t affect the performance of your app.

What is a Garbage Collector?

Since the start of the article, we have come across the term Garbage Collector. But, if you are unaware of what this really refers to, here’s what it is.

A Garbage Collector is basically a method that automatically does memory management work. Its work is to automatically collect reclaim memory or garbage that happen to be occupied by objects of no use to the program.

Essentially, Garbage Collection is quite the opposite of memory management done manually, where the programmer exclusively can decide objects that can deallocate memory and return it.

Garbage collection & its impact on performance

JavaScript utilizes a memory management model known as Garbage Collector. In most programming languages, the task of allocating and deallocating memory is left solely to the programmer.

However, on the contrary, the Garbage Collector does this task automatically. This also implies that objects are not freed from the memory heap when the programmer dereferences them, but rather when the Garbage Collector decides to do so, based on its heuristics. The manner in which the Garbage Collector works isn’t free, but also takes a part of the available performance to do its job, and further, decides the time to run by itself, offering you no control.

A Garbage Collector pulse can take place any time during the execution of your code meaning that it blocks off the execution of code unless it has completed running. Also, the time taken by this pulse is unknown to the developer and varies depending on the state of the program.

As such, applications that are known to be high-performance ones, require the consistent use of system resources to offer a smooth and reliable experience to its users. This is perturbed by the Garbage Collector that cuts into the application’s performance goals, thereby giving rise to performance issues.

Reducing memory churn

As it has already been mentioned, a Garbage Collector pulse takes place when it heuristically determines that there are many inactive objects that would benefit from a pulse. In this regard, one way to reduce the impact that the Garbage Collector has on your application would be to refrain from creating and dismissing an excessive number of objects. The processing that encompasses the frequent creation and freeing of objects is referred to as memory churn. Thus, on reducing memory churn, you can effectively lessen the amount of time that the Garbage Collector may take out of your execution. Reducing the number of objects created or destroyed will result in the graph as shown below.

Figure 3. Graph depicting target

The graph above shows us that there is no saw tooth type of a pattern, and grows largely at first. It then increases slowly over time. If you happen to have performance issues due to memory churn, this the type of graph you must target.

What is static memory JavaScript?

Static Memory JavaScript is basically a method that involves the pre-allocation of all the memory that a web application/game is likely to require right at the start of the app. Also, it involves managing memory during the execution process since objects are not needed with this implementation. This can be done in a few basic steps –

  • Tailor the application and determine the maximum number of live memory objects that are required. You must do this for a range of scenarios.
  • Realign your code to pre-allocate memory, as per the maximum amount. You will also need to fetch and release them manually instead of going to the main memory.

Now, to accomplish the first step, you will need to take care of step 2, so that’s where we start off.

Object Pooling

Object pooling broadly refers to the process by which unused objects of similar types are retained. Thus, when you require a new object for your code, you can recycle any of the unused objects from the pool rather than having to create new ones from the memory heap. Further, once the external code has finished its work, the object is returned to the pool rather than having it released to the main memory. And, since the object code is never dereferenced in realistic terms, it does not invite Garbage Collection.

How do Object Pools help?

Utilization of object pooling puts the control of memory back to the hands of the programmer. In this manner, it reduces the impact the garbage collector has on the performance of a web application.

Implementing Object Pooling

An application largely features a heterogeneous set of object types. Thus, in order to properly implement object pooling, you will need to have a pool for every type that will also experience high churn during the running time of the application.

Listing 1: Implementation of object pool

var newentity = gEntityObjectPool.allocate();
newentity.pos = {x: 225, y: 90};
//-----  Do whatever with the object that you need to do in your application
gEntityObjectPool.free(newentity); //freeing the object when the task is done
newentity = null; //freeing this object reference 

The above code demonstrates how object pooling can be implemented with a simple example.

For most of the applications, you will have an idea about the need to allocate new objects. Over the course of multiple executions, you will be able to determine what the upper limit is likely to be. Accordingly, you can make a pre-allocation for that many objects right at the start of the application.

Pre-allocation of objects

The implementation of object pooling for your application will allow you to determine a theoretical maximum for the number of objects that will likely be required during the runtime of your application. Further, you can run several different tests to see the various types of memory requirements that will be necessary and catalog that data somewhere. Analyzing the data will help you gain more knowledge and help you rightly determine the maximum number of objects that may be needed.

In the final version of you application, you can pre-fill the object pools to a specific amount in the initialization phase. This process can surely reduce the number of dynamic allocations during the app execution.

Listing 2: Pre-allocating of objects

function init() {
  //pre-allocating all the necessary pools 
  //You may note that we keep every pool homogeneous with respect to the object types

You should note that the amount that you choose should have a lot to do with the behavior of an application. Often, the theoretical best might not be the best suitable option for your app. Choosing of the average maximum can prove to be largely better in terms of memory footprint, mainly for less powerful applications.

Point to note

Object pooling isn’t necessarily meant for everyone. In fact, you need to consider the tradeoffs that come between choosing static memory methods and object pools.

  • Startup times are generally longer, since cycles are spent on allocating memory during the initialization phase
  • Memory is also unlikely to shrink during low usage cases. The app will pretty much consume a good amount of memory.
  • Also, sometimes you will need to clean objects that are returned to the pool. This can result in a non-trivial overhead.


One of the very basic reasons why JavaScript finds massive usage in the development of Web applications is because it is an easy language to learn. Also, it happens to be really fast in its workings. This is largely because of its low hindrance to syntax restrictions and also the handling of memory issues by itself, thus taking a major burden off your plate. In fact, you can simply concentrate on the coding part and get it to take care of all the dirty work for you.

However, in the case of high performance application/games, such as HTML5 games, the Garbage Collector can eat into your performance, thereby raising issues. This tutorial shows how one can tailor their code and also make use of object pools to counter the threat that comes from Garbage Collector. In fact, you can reclaim frame rates and use that for better things in your applications and games.

Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login