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

NOTE: Please make sure you have latest version of browsers before running the code sample below because there used to be bug in the browser which has been fixed in the latest version of browsers. Major browser vendors (Chrome, Firefox and Safari) agreed to implement task queue and micro task queue stuff as specified in the standard Spec.

Quiz 1 : codepen example:
https://codepen.io/jitubutwal144/pen/GxEoXR?editors=1011

Quiz 2: codepen example:
https://codepen.io/jitubutwal144/pen/XEgdWP?editors=1011

References:
What the heck is event loop anyway ?
https://www.youtube.com/watch?v=8aGhZQkoFbQ

Jake Archibald: In The Loop - JSConf.Asia 2018
https://www.youtube.com/watch?v=cCOL7MC4Pl0

Event loop explainer - and its pseudo code
https://github.com/atotic/event-loop

Blog: You can find animated execution of the code sample above on the following link
https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/

Blog: JavaScript: How is callback execution strategy for promises different than DOM events callback?
https://medium.com/@jitubutwal144/javascript-how-is-callback-execution-strategy-for-promises-different-than-dom-events-callback-73c0e9e203b1

- Twitter: https://twitter.com/@jitubutwal144

Transcript

1. JavaScript: Callback execution strategy in browser using task and micro task queues
2. 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
3. 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
4. An overview of browser
5. Javascript Runtime (Simulator)
6. Javascript Runtime with micro task queue
7. 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
8. 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
9. 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.
10. 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(); } }
11. 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.
12. Quiz 1 - answer
13. 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
14. 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
15. Quiz 2 - answer
16. Quiz 3 - answer
17. Quiz 3 - answer
18. Thank You!!
19. 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?