Getting Started with JS Performance Pattern

October 6th, 2017 . 8 minutes read
Blog featured image

This article is for all JavaScript enthusiast, who has been coding for a while. In this article, I will be mostly talking about the performance pattern of our traditional JavaScript code and how we can improve its performance.

In this article, I will present you with some of my thoughts about the JavaScript code, so that you could research on your own and find new patterns yourself.

Let’s get going-

What is a Performance Pattern?

If you have not heard this ‘Pattern’ word before you might be wondering what is it in this context.
Please check this link out to understand patterns in a Programming language.

If I put it in simple language:

“It’s a template/snippet of code that can be reused to solve problems”
Let me clarify it by example

Above code snippet has no return value, neither it is changing the value of any variable of higher scopes. So what it does exactly!

The answer may surprise you. This is how you create classes in JavaScript. The class keyword was introduced in ECMAScript 2015. Until then, you have to write something like the above snippet, and BOOM, you have created a class in JS.

If you are still wondering how to use it to make an object, here it is:

Now you have an object which is the instance of the Person class.

To be more precise, in this article I will discuss those patterns (JS code) that have the faster runtime. Although for the small application it might not be a big deal. But the organizations like Netflix have to care about all these. This will matter if you have a site with a lot of traffic.

Why do I care about the performance of the JS code?

We all know that JS is single-threaded. Simply speaking, you can only execute a single line of code at a time. Execution continues line by line. You can’t do tasks concurrently is JS.

But wait ‘I have written Asynchronous code.’

I will get back to it. For now, just be with me.

You should always try to optimize the code for better performance and lower runtimes. And write fast synchronous code. let see some codes now.

DOM Manipulations

DOM manipulations are somewhat a costly operation. Its time complexity in the worst case is O(n). So larger the page you have, slower the DOM Access. Keeping that in mind, here are some techniques that you should use for accessing the DOM.

1. jQuery insert operations like prepend(), append(), after() are rather time-consuming. Here you can see the benchmark, You can see the performance of the code and decide yourself.

Jquery HTML performs better than append

2. DOM Caching
I have already said that accessing them is O(n). So, what we can do is cache the frequently use DOM and just store reference for later use.


Cache the list element and then use it:

If you want to see the benchmarks here is it:

3. Increases Performance

Now you can explore more patterns that have good performance.

‘for’ loop Performance :

The traditional way to write for loop is like this;

Can we write a better loop? Let’s explore where the problem is,

It includes two operations:

1. Check if ‘item’ exist
2. Then check the length property.

So can optimize that?

Let’s look other alternative ways to write loops.

In this loop, we are checking, if the item at specific index exists or not, remaining things are just same.

How about next alternative:

In this loop, we have once assigned the length of the item and on each iteration, we are just comparing the constant number with i.

Now you might have got the answer, which loop performs the best. If not, let’s see the benchmarks first:

4. Execution times are in milliseconds, 3rd loop performs best

So now you know some better loops. Think about it and explore more yourself.

Asynchronous Tasks in JavaScript

Now let’s discuss more interesting stuff related to performance. Asynchronous tasks in JavaScript. How being single-threaded, JS performs asynchronous tasks-

Before moving on, see the below code:

My question is when the log will print ‘finally finished’?

My next talk is completely based on this youtube video. I will talk about something called ‘event loop’ in JS.

Javascript is really single-threaded. It has one execution stack, where it keeps the function calls and their data. It looks like this –

4. Call Stack

But the concurrency is supported by the browser, on the WEB it is Web-API and on the Backend side (nodejs) its C++ APIs. So the whole picture now looks like this-

5. more clear view on JS

All of our code is executed inside the main function, so first, the main function is pushed onto the stack.

And whenever an asynchronous task such as AJAX request, setTimeout, etc. is pushed to the stack, it is sent to the web APIs and it returns immediately. And programs continue to execute normally.

6. Callback associated with the setTimeout is sent to the web API

In the above picture:
1. setTimeout is pushed to the stack.
2. Then the callback function is sent to the web APIs.
3. setTimeout returns (popped from the stack).

Now the web API runs the timer/delay. And concurrently our JS code executes. When the web API is done with its task, it simply puts the callback function to the ‘task queue’.

7. web API is done with the task, the callback is now sent to the task queue.

In figure 7, the web APIs is done with the network operation or delay, and it has put the callback function to the task queue.

And when only the stack is empty ‘event loop’ will check if there is something in the task queue, if there is something it will push it to stack, and finally our code that was asynchronous gets executed by javascript.

8. Stack was empty, so the tasks from task queues are pushed one by one to stack

Now, Our callback function will finally be executed.

Keep in mind that, tasks from the task queue will not be pushed to the stack until the stack is empty, even the main function has to return then only the ‘eventloop’ will put the tasks from task queue to the execution stack.

Now that you know how the setTimeout and setInterval are executed, you can conclude that their delay is not exact. Their delay is minimum time after they are executed but the precision of their execution time is not guaranteed.

This article has gone long already, I will explain how you can exploit the feature of event loop to improve the performance of your code. Comment your answer of the question,

I will explain the answer in next post. Subscribe to our newsletter, and stay tuned.

Habilelabs is providing web-based development and mobile-based development support from a long time with high-quality work. Contact Us if you have anything to build.

Hope you found the Performance Pattern post, drop me a line in the comment section if you have anything to ask.

Author: ashu