DEV Community

Cover image for Javascript MicroTask vs MacroTask Queue - Visually Explained Through An Animation 🤯🔥
Ram Maheshwari ♾️
Ram Maheshwari ♾️

Posted on • Edited on

13 1

Javascript MicroTask vs MacroTask Queue - Visually Explained Through An Animation 🤯🔥

Microtask vs Macrotask Queue in JavaScript

I created this above animation to help you understand the difference between MicroTask & MacroTask Queue in JavaScript 🤯🔥

Took me almost 5-6 hrs to create this for you guys ✌️

Now, let's understand the difference between MicroTask Queue & MacroTask Queue in JavaScript 🦄

Microtask Queue: ⬇️

In JavaScript, a microtask queue is a queue of tasks that are executed after the current task (i.e., the task currently being executed by the JavaScript engine) completes. These tasks include things like resolving Promises and updating the DOM ✅

Macrotask Queue: ⬇️

A microtask queue, on the other hand, is a queue of tasks that are executed after all microtasks have been processed. These tasks include things like setTimeout and setInterval. The JavaScript engine processes the tasks in the microtask queue before moving on to the tasks in the macrotask queue ✅

Hope this is helpful ✨

Do Like ❤️ & Save 🔖

𝗙𝗼𝗹𝗹𝗼𝘄 me on Linkedin for more:
Tips💡+ Guides📜 + Resources ⚡ related to programming and Web Development 👨‍💻

Do Follow me here on dev.to ✅

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (5)

Collapse
 
bri219 profile image
Brian Aponte

This is very helpful. Thanks again Ram.

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

Thank you so much, Brian ❤️🙌

Collapse
 
kexposito profile image
Kevin Expósito

Awesome job @rammcodes ! What did you use for animations? Really love this concept

Collapse
 
rammcodes profile image
Ram Maheshwari ♾️

Thanks, Kevin, I used Microsoft PowerPoint to create that Animation, Hope that helps 🙌

Collapse
 
chandkaurati profile image
chand kaurati

very helpful thanks

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay