Request a Call Back
X
Fields marked with an * are required
Getting Started with JS Performance Pattern - Habilelabs

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 some of my thoughts about the JavaScript code, So that you could research on your own and find new patterns yourself.

So let’s begin.

What is Performance Pattern by the way?

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 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 task 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 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.

1. 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.

Example:

Cache the list element and then use it:

If you want to see the benchmarks here is it:

2. Without doubt caching increases the 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:

3. 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 the 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 are 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 main function have to return then only the ‘eventloop’ will put the tasks from task queue to execution stack.

Now 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 Performance Pattern post, drop me a line in the comment section if you have anything to ask.

What others say about us

quotes icon

"iSEEit has been closely working with Habilelabs team ever since our company needed to step up development efforts. Being a rapidly evolving software company, we have come across a multitude of challenges over time but Habilelabs has proactively solved issues impacting the business and handled the continuous releases of the applications without downtime. We are very satisfied and happy to have found Habilelabs as our offshore development partner as they have developed a good understanding of our own vision and work flows."

iSEEit

Rizan Flenner

"Amazing and skilled team we been learning from each other for quite some time, and still working together.
Always available and ready to make great results, or to improve unexpected problems."

Siquo

Daniel White

https://www.siquo.com/

"I am very pleased with the work Habilelabs provides. Every time we have worked, projects were delivered on time. They provide great support and I would totally recommend Habilelabs to anyone that wants to get a project done on time and professionally."

Tableluv

Xenophon Kanarios

http://tableluv.gr/

"Habilelabs is an excellent and affordable programming team that delivers fast results."

Paiusa

Stephen Blaney

http://www.paiusa.com/

"Good mindset, good technical competence and skills, always fix problems when needed."

Denthub

Arash Fard-Rahmani

"We have been extremely satisfied with the project that has been delivered by Habilelabs. They are very professional with great commitments. Quality of communication and problem solving skills were perfect."

Safak Korkut

"Very much satisfied the work. Team quickly understood the requirements and completed work on time. Would definitely recommend him. We will like to hire them again."

Stanislav M.

"Habilelabs is the definition of professional and friendly. They knew exactly what they are doing and never shy to share their knowledge. We will definitely consider hiring them for future projects! Great Work!."

Eben B.

"Great work, will hire team Habilelabs again. I appreciate the extra effort. Excellent work as always."

Saasmath

"Very fast and professional Team. They knows exactly what needs to be developed to achieve the project goal. We will hire them again"

Mediaroot

"Very good work, Little expencive for us but prefere to work with them because I'm sure the work will be done 100%"

ProwebMedia

"Team habilelabs is a pleasure to work with and we will work with them again. They are professional, easy to communicate with, and completes tasks on time and on budget."

KCRW

"Really impressed with the high quality work and professionalism!"

Vaibhav Samadhiya

"We worked Habilelabs team and they are very professional, motivated and experienced developer. I would love to work with them in the future again!"

Mahdishahadat

"We had a great collaboration with Habilelabs. They are very communicative, extremely competent and responsive. We are looking forward to continuing our collaboration with Habilelabs. I recommend them with full confidence."

Safkutkorfak

"I'm very impressed with work quality. Habilelabs shows outstanding performance and knowledge in area needed for our project. I'm fully satisfied with Habilelabs's service. Will look for more opportunities to work with them"

AdramMedia

"Team habilelabs are truly great developers to work with, and ensure that the work is completed to the highest of standards. Real pleasure to work with would highly recommend for Node.js / React.js work."

Liamsm

"Habilelabs is a fabulous company. Excellent in quality and always available for communication. We hired Habilelabs team for doing the frontend of my application and they gave me some good tips about backend APIs as well, which tells a lot about their overall expertise. Really appreciate their sincerity, timely delivery and professionalism. Will definitely hire them again in future."

Atul Shrivastava

"very good very profasional, They did good job on time +++"

Moshe Levy

"Love the Company Habilelabs . Knew thier stuff and really came through for me."

Zehash

"5 stars work, very good communication, timely delivery."

Anthony Hu

"iSEEit has been closely working with Habilelabs team ever since our company needed to step up development efforts. Being a rapidly evolving software company, we have come across a multitude of challenges over time but Habilelabs has proactively solved issues impacting the business and handled the continuous releases of the applications without downtime. We are very satisfied and happy to have found Habilelabs as our offshore development partner as they have developed a good understanding of our own vision and work flows."

iSEEit

Rizan Flenner

"Amazing and skilled team we been learning from each other for quite some time, and still working together.
Always available and ready to make great results, or to improve unexpected problems."

Siquo

Daniel White

https://www.siquo.com/

"I am very pleased with the work Habilelabs provides. Every time we have worked, projects were delivered on time. They provide great support and I would totally recommend Habilelabs to anyone that wants to get a project done on time and professionally."

Tableluv

Xenophon Kanarios

http://tableluv.gr/

"Habilelabs is an excellent and affordable programming team that delivers fast results."

Paiusa

Stephen Blaney

http://www.paiusa.com/

"Good mindset, good technical competence and skills, always fix problems when needed."

Denthub

Arash Fard-Rahmani

"We have been extremely satisfied with the project that has been delivered by Habilelabs. They are very professional with great commitments. Quality of communication and problem solving skills were perfect."

Safak Korkut

"Very much satisfied the work. Team quickly understood the requirements and completed work on time. Would definitely recommend him. We will like to hire them again"

Stanislav M.

"Habilelabs is the definition of professional and friendly. They knew exactly what they are doing and never shy to share their knowledge. We will definitely consider hiring them for future projects! Great Work!"

Eben B.

"Great work, will hire team Habilelabs again. I appreciate the extra effort. Excellent work as always."

Saasmath

"Very fast and professional Team. They knows exactly what needs to be developed to achieve the project goal. We will hire them again"

Mediaroot

"Very good work, Little expencive for us but prefere to work with them because I'm sure the work will be done 100%"

ProwebMedia

"Team habilelabs is a pleasure to work with and we will work with them again. They are professional, easy to communicate with, and completes tasks on time and on budget."

KCRW

"Really impressed with the high quality work and professionalism!"

Vaibhav Samadhiya

"We worked Habilelabs team and they are very professional, motivated and experienced developer. I would love to work with them in the future again!"

Mahdishahadat

"We had a great collaboration with Habilelabs. They are very communicative, extremely competent and responsive. We are looking forward to continuing our collaboration with Habilelabs. I recommend them with full confidence."

Safkutkorfak

"I'm very impressed with work quality. Habilelabs shows outstanding performance and knowledge in area needed for our project. I'm fully satisfied with Habilelabs's service. Will look for more opportunities to work with them"

AdramMedia

"Team habilelabs are truly great developers to work with, and ensure that the work is completed to the highest of standards. Real pleasure to work with would highly recommend for Node.js / React.js work."

Liamsm

"Habilelabs is a fabulous company. Excellent in quality and always available for communication. We hired Habilelabs team for doing the frontend of my application and they gave me some good tips about backend APIs as well, which tells a lot about their overall expertise. Really appreciate their sincerity, timely delivery and professionalism. Will definitely hire them again in future."

Atul Shrivastava

"very good very profasional, They did good job on time +++"

Moshe Levy

"Love the Company Habilelabs . Knew thier stuff and really came through for me."

Zehash

"5 stars work, very good communication, timely delivery."

Anthony Hu