Scribd
Upload
2 views

Event_Loop_Js

The document explains the execution priorities of tasks in JavaScript's event loop, categorizing them into synchronous code, microtasks, callback queue, and rendering tasks. Synchronous code has the highest priority, followed by microtasks like promises, then the callback queue for setTimeout and event listeners, and finally rendering tasks. An example execution order is provided to illustrate how these priorities affect the output of JavaScript code.

Uploaded by

vaibhmore09
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
2 views

Event_Loop_Js

The document explains the execution priorities of tasks in JavaScript's event loop, categorizing them into synchronous code, microtasks, callback queue, and rendering tasks. Synchronous code has the highest priority, followed by microtasks like promises, then the callback queue for setTimeout and event listeners, and finally rendering tasks. An example execution order is provided to illustrate how these priorities affect the output of JavaScript code.

Uploaded by

vaibhmore09
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 4

JavaScript's event loop processes various types of tasks in a specific order and with different priorities.

To make this clear, I’ll break down the execution priorities of various operations in JavaScript, including
functions, promises, loops, variables, objects, async/await, setTimeout, and other elements in the
event loop cycle.

Priority Order in JavaScript Event Loop

A]Synchronous Code (Normal Functions, Loops, Variables, etc.):

· Highest priority: Synchronous code executes immediately, as part of the call stack. It does not
go into any queue.

· Normal Functions: Regular function calls are executed in the current execution context.

· Loops: Loops (like for, while) are part of the synchronous code and execute immediately as
well.

· Variables: Variable assignments and declarations (like let, const, var) are part of the
synchronous execution.

B]Microtasks (Promises, queueMicrotask(), etc.):

· Higher priority than callback queue: After synchronous code execution, the event loop checks
the microtask queue.

· Promises: The .then(), .catch(), and .finally() handlers for promises are added to the microtask
queue. They run after synchronous code, but before any tasks in the callback queue.

· queueMicrotask(): Tasks added with queueMicrotask() are placed in the microtask queue and
executed before the callback queue.

· Async/Await: async/await works with promises. When an await is encountered, it pauses the
execution of the async function until the promise resolves. The code after await is added to
the microtask queue and will be executed after the current synchronous code, but before
callback queue tasks.

C]Callback Queue (Task Queue, Event Queue):


· Lower priority than microtasks: After the microtask queue is processed, the event loop checks
the callback queue.
· setTimeout/setInterval: The callback functions of setTimeout and setInterval are placed in the
callback queue. They are executed only after all microtasks are completed.

· Event Listeners: Event handler callbacks (e.g., click, keydown, etc.) are placed in the callback
queue and processed in the order they are added.

· I/O callbacks: Any other I/O operations, such as reading files or network requests, add their
callbacks to the callback queue.
D]

D]Rendering/Other Tasks:
· Lowest priority: After processing the callback queue, the browser (or environment) may
perform repainting, reflowing, or other rendering tasks.

· These are typically not something developers control directly, but they occur after all
JavaScript execution is completed.
console.log('Start');

setTimeout(() => {

console.log('setTimeout');

}, 0);

Promise.resolve().then(() => {

console.log('Promise 1');

});

async function asyncFunction() {

console.log('Async Start');

await Promise.resolve();

console.log('Async End');

asyncFunction();

setTimeout(() => {

console.log('setTimeout 2');

}, 0);

console.log('End');

Execution Order:
'Start' (synchronous log)

'End' (synchronous log)

Microtasks:

· 'Promise 1' (from the first promise)

· 'Async Start' (synchronous part of asyncFunction())

Microtasks (continued):

· 'Async End' (from the promise inside asyncFunction())

Callback Queue:

· 'setTimeout' (from the first setTimeout)


· 'setTimeout 2' (from the second setTimeout)

Summary of Execution Order (Priority):


· Synchronous code (normal functions, loops, variables)

· Microtasks (promises, queueMicrotask(), async/await)

· Callback queue (setTimeout, event listeners, I/O callbacks)

· Rendering (repainting, reflowing)

You might also like