Slide 1

Slide 1 text

JavaScript: Callback execution strategy in browser using task and micro task queues

Slide 2

Slide 2 text

Quiz 1 - Codepen example console.log("Start"); setTimeout(function CB1() { console.log("Settimeout 1"); }, 0); setTimeout(function CB2() { console.log("Settimeout 2"); }, 0); Promise.resolve().then(function CB3() { console.log("Promise 1"); }); Promise.resolve().then(function CB4() { console.log("Promise 2"); }); console.log("End"); Option 1 Start End Settimeout 1 Settimeout 2 Promise 1 Promise 2 Option 2 Start End Promise 1 Promise 2 Settimeout 1 Settimeout 2 Option 3 None of above

Slide 3

Slide 3 text

Quiz 1 - Codepen example console.log("Start"); setTimeout(function CB1() { console.log("Settimeout 1"); }, 0); setTimeout(function CB2() { console.log("Settimeout 2"); }, 0); Promise.resolve().then(function CB3() { console.log("Promise 1"); }); Promise.resolve().then(function CB4() { console.log("Promise 2"); }); console.log("End"); Option 2 Start End Promise 1 Promise 2 Settimeout 1 Settimeout 2 Option 1 Start End Settimeout 1 Settimeout 2 Promise 1 Promise 2 Option 3 None of above

Slide 4

Slide 4 text

An overview of browser

Slide 5

Slide 5 text

Javascript Runtime (Simulator)

Slide 6

Slide 6 text

Javascript Runtime with micro task queue

Slide 7

Slide 7 text

Sources of callback function Group 1 - Keyboard events (keydown, keyup etc) - Mouse events (click, mouseup, mousedown etc) - Network events (online, offline) - Drag and drop events (dragstart, dragend )etc -Timer events (setTimeout(…), setInterval(…)) Group 2 - Promises (resolve(), reject()) - Browser observers - Mutation observer - Intersection Observer - Performance Observer - Resize Observer

Slide 8

Slide 8 text

Callbacks and queues used Task queue (Group 1) - Keyboard events (keydown, keyup etc) - Mouse events (click, mouseup, mousedown etc) - Network events (online, offline) - Drag and drop events (dragstart, dragend )etc -Timer events (setTimeout(…), setInterval(…)) Micro task queue (Group 2) - Promises (resolve(), reject()) - Browser observers - Mutation observer - Intersection Observer - Performance Observer - Resize Observer

Slide 9

Slide 9 text

Event loop - The event loop is the mastermind that orchestrates: - What JavaScript code gets executed? - When does it run? - When do layout and style get updated? - When do DOM changes get rendered? - Responsible to pick up the task from Task queue or Micro task queue and execute it in the callstack.

Slide 10

Slide 10 text

Event loop - pseudo code while(true) { task = eventLoop.nextTask(); // execute callback in the task queue if (task) { task.execute(); } // execute all callbacks in the micro task queue eventLoop.executeMicrotasks(); if (eventLoop.needsRendering()) { eventLoop.render(); } }

Slide 11

Slide 11 text

Execution strategy - If one task contains multiple micro tasks, all the callbacks queued in Micro task queue is executed first before picking up the next task from the task queue. - Before executing next task from the task queue, callstack should be empty.

Slide 12

Slide 12 text

Quiz 1 - answer

Slide 13

Slide 13 text

Quiz 2-two click listeners for one button Option 1 Listener 1 Promise 1 Listener 2 Promise 2 Settimeout 1 Settimeout 2 Option 2 Listener 1 Settimeout 1 Promise 1 Listener 2 Settimeout 2 Promise 2 var button = document.querySelector(".button"); button.addEventListener("click", function CB1() { console.log("Listener 1"); setTimeout(function ST1() { console.log("Settimeout 1"); }, 0); Promise.resolve().then(function P1() { console.log("Promise 1"); }); }); button.addEventListener("click", function CB2() { console.log("Listener 2"); setTimeout(function ST2() { console.log("Settimeout 2"); }, 0); Promise.resolve().then(function P2() { console.log("Promise 2"); }); }); Option 3 None of above

Slide 14

Slide 14 text

Quiz 2-two click listeners for one button Option 1 Listener 1 Promise 1 Listener 2 Promise 2 Settimeout 1 Settimeout 2 Option 2 Listener 1 Settimeout 1 Promise 1 Listener 2 Settimeout 2 Promise 2 var button = document.querySelector(".button"); button.addEventListener("click", function CB1() { console.log("Listener 1"); setTimeout(function ST1() { console.log("Settimeout 1"); }, 0); Promise.resolve().then(function P1() { console.log("Promise 1"); }); }); button.addEventListener("click", function CB2() { console.log("Listener 2"); setTimeout(function ST2() { console.log("Settimeout 2"); }, 0); Promise.resolve().then(function P2() { console.log("Promise 2"); }); }); Option 3 None of above

Slide 15

Slide 15 text

Quiz 2 - answer

Slide 16

Slide 16 text

Quiz 3 - answer

Slide 17

Slide 17 text

Quiz 3 - answer

Slide 18

Slide 18 text

Thank You!!

Slide 19

Slide 19 text

References - What the heck is event loop anyway ? - Jake Archibald: In The Loop - JSConf.Asia 2018 - Event loop explainer - and its pseudo code - JavaScript: How is callback execution strategy for promises different than DOM events callback?