Lightining Talk - Task queue and micro task queues in browser
0 likes272 views
The document discusses the callback execution strategy in browsers, highlighting the roles of task and micro task queues in the JavaScript event loop. It explains how the event loop manages the execution of JavaScript code, layout updates, and rendering, emphasizing the prioritization of micro task callbacks before tasks from the task queue. Several quizzes and examples illustrate the concepts of event listeners, setTimeout, and promise execution order in different scenarios.
Lightining Talk - Task queue and micro task queues in browser
- 1. Callback execution strategy in browser using task and micro task queues - Jitendra Kasaudhan - Web developer @check24de - Twitter: @jitubutwal144
- 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. What the heck is event loop anyway? Source: https://www.youtube.com/watch?v=8aGhZQkoFbQ - By @philip_roberts
- 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?