Understanding JavaScript's performance and how to improve it with asynchronous code

Опубликовано: 14 Октябрь 2024
на канале: Lauro Müller

152

Link to coupons with BIG DISCOUNTS 🤯 :
👉 Mastering Terraform: From Beginner to Expert - https://www.lauromueller.com/courses/...
👉 Mastering GitHub Actions: From Beginner to Expert - https://www.lauromueller.com/courses/...
👉 Write better code: 20 code smells and how to get rid of them - https://www.lauromueller.com/courses/...

Do you want to bring your dev skills to the next level? Then check out the links with BIG DISCOUNTS to my courses on Udemy! Purchasing the courses is a great way to support this channel and the content I produce, while also getting something amazing in return, so head there right now! I am looking forward to seeing you there and receiving your feedback on the course!

The courses also have a 30-day money-back guarantee, so if you are not satisfied with the purchase, you can ask for a refund, no questions asked.

***

Hello and welcome back! In this video, we take a deeper dive at how JavaScript applications run , what it means to be a single-threaded process, and how using asynchronous execution can help improve the performance of your code!

CHAPTERS:
0:00 Introduction
3:47 Understanding how JavaScript-based servers work
5:48 How asynchronous execution comes into play
11:07 The different components of the JavaScript event loop

JavaScript runs on a single thread, which means it cannot do more than one thing at a time. If your JavaScript process is busy with expensive calculations, everything else which wants to use the JavaScript process has to wait. Perhaps you have already experienced web pages simply freezing for a couple of seconds? One of the reasons is exactly this! The JavaScript thread is busy, which basically causes every other interactive action to hang. Buttons become unresponsive because, when you click a the button, it triggers a JavaScript function. Since the JavaScript thread is busy, this function cannot be executed and we get no immediate feedback from the browser.

Another very common example happens on servers. A JavaScript-based server (be it Express, Fastify, NestJS, or even a simple HTTP server) is a JavaScript process running on a single thread. What does that mean? Exactly the same as above! If the server is busy calculating stuff for one request, it cannot process further requests until that calculation is over!

As you can imagine, dealing with such an application can quickly become extremely annoying, as even a simple request may take several seconds to be resolved. Enter asynchronous code! With JavaScript's asynchronous capabilities, it is possible to delegate such long-running operations to processes running outside of the main thread. For example, a database call is initiated by the JavaScript code, but the main thread doesn't get blocked while the DB is fetching the data. This is because the database call is run asynchronously. In other words, we trigger the execution of the database query and give it a callback. Once the database is done fetching the data for us, it will add this callback to the callback queue in the JavaScript event loop, and this callback will eventually be executed once the main JavaScript process is free. Wonderful, no?

HOWEVER, this world is also not perfect! What happens when we send too many calls to the database? Of course, the database starts to queue the requests and it becomes the bottleneck of the whole process!

As you can see, analyzing the performance of a JavaScript application is not a trivial matter, so in this video we discuss in simple terms how the most important elements of a JavaScript application interact with each other, and how we can improve performance by better designing our code.

I hope you enjoy!