JavaScript ๐— ๐—ถ๐—ฐ๐—ฟ๐—ผ๐˜๐—ฎ๐˜€๐—ธ ๐—ค๐˜‚๐—ฒ๐˜‚๐—ฒ and ๐— ๐—ฎ๐—ฐ๐—ฟ๐—ผ๐˜๐—ฎ๐˜€๐—ธ ๐—ค๐˜‚๐—ฒ๐˜‚๐—ฒ

Nhan Nguyen - Jun 29 - - Dev Community

JavaScript has two secret queues to handle tasks: ๐— ๐—ถ๐—ฐ๐—ฟ๐—ผ๐˜๐—ฎ๐˜€๐—ธ ๐—ค๐˜‚๐—ฒ๐˜‚๐—ฒ and ๐— ๐—ฎ๐—ฐ๐—ฟ๐—ผ๐˜๐—ฎ๐˜€๐—ธ ๐—ค๐˜‚๐—ฒ๐˜‚๐—ฒ.

Image description

โœจ๐— ๐—ถ๐—ฐ๐—ฟ๐—ผ๐˜๐—ฎ๐˜€๐—ธ ๐—ค๐˜‚๐—ฒ๐˜‚๐—ฒ: It's like a super-fast line where tiny tasks wait their turn. These tasks are usually promises or mutation observers. When a promise resolves or a mutation happens, they jump into the Microtask queue.

โœจ ๐— ๐—ฎ๐—ฐ๐—ฟ๐—ผ๐˜๐—ฎ๐˜€๐—ธ ๐—ค๐˜‚๐—ฒ๐˜‚๐—ฒ: It's like a regular line for more significant tasks. Think setTimeout, callbacks, or fetching data from a server. When these tasks need handling, they join the Macrotask Queue.

JavaScript always finishes what it's doing before checking these queues. But it prioritizes ๐— ๐—ถ๐—ฐ๐—ฟ๐—ผ๐˜๐—ฎ๐˜€๐—ธ over ๐— ๐—ฎ๐—ฐ๐—ฟ๐—ผ๐˜๐—ฎ๐˜€๐—ธ.


I hope you found it helpful. Thanks for reading. ๐Ÿ™

Let's get connected! You can find me on:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .