Download as PDF, PPTX
![Web
var tID = setTimeout(callback, [delay[, ...args]])
var tID = setTimeout(callback, [delay])
var tID = setTimeout(code[, delay])
var iID = setInterval(func, delay[, ...args])
var iID = setInterval(code, delay)
clearTimeout(tID)
clearTimeout(iID)
https://www.w3.org/standards/webdesign/script](https://image.slidesharecdn.com/javascripteventloop-180705134503/85/JavaScript-Event-Loop-12-320.jpg)
![Node
var timeout = setTimeout(callback, [delay, [...args]])
var interval = setInterval(callback, [delay, [...args]])
var immediate = setImmediate(callback[, ...args])
clearTimeout(timeout)
clearInterval(interval)
clearImmediate(immediate)
https://nodejs.org/dist/latest-v10.x/docs/api/](https://image.slidesharecdn.com/javascripteventloop-180705134503/85/JavaScript-Event-Loop-13-320.jpg)
![Web
var tID = setTimeout(callback, [delay[, ...args]])
var tID = setTimeout(callback, [delay])
var tID = setTimeout(code[, delay])
var iID = setInterval(func, delay[, ...args])
var iID = setInterval(code, delay)
clearTimeout(tID)
clearTimeout(iID)
https://www.w3.org/standards/webdesign/script](https://image.slidesharecdn.com/javascripteventloop-180705134503/75/JavaScript-Event-Loop-12-2048.jpg)
![Node
var timeout = setTimeout(callback, [delay, [...args]])
var interval = setInterval(callback, [delay, [...args]])
var immediate = setImmediate(callback[, ...args])
clearTimeout(timeout)
clearInterval(interval)
clearImmediate(immediate)
https://nodejs.org/dist/latest-v10.x/docs/api/](https://image.slidesharecdn.com/javascripteventloop-180705134503/75/JavaScript-Event-Loop-13-2048.jpg)
Uploaded byDerek Willian Stavis
JavaScript Event Loop
The document discusses the JavaScript event loop and its components, including the call stack, task queue, and vendor APIs. It explains how JavaScript operates in a single-threaded, non-blocking manner, and provides code snippets demonstrating functions like setTimeout and setInterval. Various implementations of JavaScript engines, as well as concepts related to task scheduling and execution contexts, are also highlighted.
In this document
Powered by AI
Introduction to JavaScript Event Loop, highlighting single-threaded, non-blocking, asynchronous, and concurrent concepts along with call stack, event loop, and task queue.
Various JavaScript implementations including Spidermonkey, JavaScriptCore, V8, and others utilized within different environments like web and Node.js.
Usage of setTimeout and setInterval in JavaScript to handle delayed execution and interactions in both web and Node.js contexts.
Implementation of example code using Johnny Five library for controlling hardware components using Node.js.
In-depth explanation and demonstration of the JavaScript execution contexts, task queues, and event loop processes through example functions.
Exploration of the JavaScript event loop operation, focusing on macro tasks and micro tasks and their execution order.
Detailed mechanisms of the Promise behavior in the event loop along with examples involving setTimeout and requestAnimationFrame.
Explanation of how the HTML specification defines additional task queues in the context of the event loop.
Characteristics of the Node.js event loop, detailing the execution phases and callback processing, particularly the handling of asynchronous operations.
Overall flexibility of JavaScript across environments, concluding with a summary of presentations and references.
More Related Content
![[JS EXPERIENCE 2018] Javascript Event Loop além do setInterval - Derek Stavis](https://cdn.slidesharecdn.com/ss_thumbnails/9h20-10h00-derekstavis-180706155048-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![TDC2018SP | Trilha Java - Computacao [Concorrente | Paralela | Distribuida] e...](https://cdn.slidesharecdn.com/ss_thumbnails/tdc2018-trilhajava-180801192151-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
JavaScript Event Loop
- 1. Globalcode – Open4education JavaScriptEvent Loop
- 2. Who? Derek Stavis github.com/derekstavis Software Engineer Ruby,Go, JavaScript, Python, C Node, React & Webpack Advocate
- 3.
- 4.
- 5. call stack event loop callbackqueue vendor APIs
- 6. Globalcode – Open4education Heap MemoryAvailable Task Queue listOnTimeout listOnTimeout listOnTimeout listOnTimeout listOnTimeout Delayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Vendor APIs (Node, Web, GJS) Runtime and Platform Abstraction Event Loop Task Scheduler
- 7. Globalcode – Open4education Heap MemoryAvailable Task Queue listOnTimeout listOnTimeout listOnTimeout listOnTimeout listOnTimeout Delayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Vendor APIs (Node, Web, GJS) Runtime and Platform Abstraction Event Loop Task Scheduler VENDOR DEPENDENT VENDOR DEPENDENT ECM A262 VENDOR DEPENDENT ECM A262 OVERLAP VENDOR DEPENDENT ECM A262 OVERLAP
- 8. Globalcode – Open4education callstack ∙ task queue ∙ event loop ∙ vendor APIs Vendor Dependent Vendor APIs
- 9.
- 10.
- 11.
- 12. Web var tID =setTimeout(callback, [delay[, ...args]]) var tID = setTimeout(callback, [delay]) var tID = setTimeout(code[, delay]) var iID = setInterval(func, delay[, ...args]) var iID = setInterval(code, delay) clearTimeout(tID) clearTimeout(iID) https://www.w3.org/standards/webdesign/script
- 13. Node var timeout =setTimeout(callback, [delay, [...args]]) var interval = setInterval(callback, [delay, [...args]]) var immediate = setImmediate(callback[, ...args]) clearTimeout(timeout) clearInterval(interval) clearImmediate(immediate) https://nodejs.org/dist/latest-v10.x/docs/api/
- 14. Node console.log('start'); process.nextTick(() => { console.log('nextTickcallback'); }); console.log('scheduled'); https://nodejs.org/dist/latest-v10.x/docs/api/
- 15. GJS const { mainloop} = imports mainloop.timeout_add(1, () => log(“Hello World”)) mainloop.timeout_add(1, mainloop.quit) mainloop.run() GJSDocs based on GObject Instrospection
- 16. Johnny Five // Blinkan LED var five = require("johnny-five") var board = new five.Board() board.on("ready", function() { var led = new five.Led(13) led.blink() }); http://johnny-five.io/api/led/#usage http://johnny-five.io/api/
- 17. Johnny Five // Blinkan LED var five = require("johnny-five") var board = new five.Board() board.on("ready", function() { var led = new five.Led(13) led.blink() }); http://johnny-five.io/api/led/#usage http://johnny-five.io/api/
- 18.
- 19.
- 20. Globalcode – Open4education callstack ∙ task queue ∙ event loop ∙ vendor APIs ECMA 8.4 Jobs and Job Queues & ECMA 8.6 RunJobs() Call Stack
- 21. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints()
- 22. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() main
- 23. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() prints main
- 24. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() prints main
- 25. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() prints main
- 26. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() square prints main
- 27. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() square prints main
- 28. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() multiply square prints main
- 29. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() multiply square prints main
- 30. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() multiply square prints main
- 31. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() square prints main
- 32. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() square prints main
- 33. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() prints main
- 34. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() console.log prints main
- 35. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() prints main
- 36. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints() main
- 37. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply = (a, b) => a * b const square = (number) => multiply(number, number) const prints = (number) => console.log(square(number)) prints()
- 38. Pretty easy tograsp
- 39. That’s where that “stacktraces” thing comes from
- 40. Globalcode – Open4education callstack ∙ task queue ∙ event loop ∙ vendor APIs And some of Event Loop Task Queue
- 41. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 42. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) main const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 43. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) setTimeout main
- 44. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) listOnTimeout, 2000 setTimeout main
- 45. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) main const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) listOnTimeout, 2000
- 46. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) listOnTimeout, 2000
- 47.
- 48. When does thetimer really fires?
- 49. Globalcode – Open4education callstack ∙ task queue ∙ event loop ∙ vendor APIs Vendor Dependent & Partially described in ECMA Event Loops
- 50. There’s an infiniteloop while (queue.waitForMessage()) { queue.processNextMessage(); }
- 51. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) listOnTimeout, 2000
- 52. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) tryOnTimeout listOnTimeout
- 53. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) prints tryOnTimeout listOnTimeout
- 54. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) prints tryOnTimeout listOnTimeout
- 55. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) prints tryOnTimeout listOnTimeout
- 56. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 57. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) square prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 58. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) square prints tryOnTimeout listOnTimeout
- 59. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) multiply square prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 60. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) square prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 61. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) square prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 62. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 63. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 64. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 65. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) console.log prints tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 66. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 67. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) tryOnTimeout listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 68. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) listOnTimeout const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 69. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000) const multiply (a, b) => a * b const square (number) => multiply(number, number) const prints (number) => console.log(square(number)) setTimeout(prints, 2000)
- 70. So that’s itfor event loops, right?
- 71. The loop dequeuesan event, dispatches the callback…
- 72. And setTimeout and setIntervaladds callbacks to queue…
- 73. And every tickthe loop consumes an item from the queue…
- 74.
- 75.
- 76. Promise case console.log('script start'); newPromise(resolve => { resolve(); console.log('executor'); }) .then(() => console.log('then'); console.log('script end');
- 77. script start script end then executor B AC D script start then executor script end script start script end executor then script start then executor script end
- 78. script start then executor script end scriptstart script end then executor B A C script start script end executor then D script start then executor script end
- 79. Promise case console.log('script start'); newPromise(resolve => { resolve(); console.log('executor'); }) .then(() => console.log('then'); console.log('script end');
- 80.
- 81.
- 82. Browser console console.log('script start'); setTimeout(()=> console.log('setTimeout'), 0); requestAnimationFrame(() => console.log('requestAnimationFrame')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end');
- 83. script start script end setTimeout promise1 promise2 scriptstart script end promise1 promise2 setTimeout B A C script start setTimeout promise1 promise2 script end D script start promise1 promise2 setTimeout script end
- 84. script start script end setTimeout promise1 promise2 scriptstart script end promise1 promise2 setTimeout B A C script start setTimeout promise1 promise2 script end D script start setTimeout promise1 promise2 script end
- 85. Browser console console.log('script start'); setTimeout(()=> console.log('setTimeout'), 0); requestAnimationFrame(() => console.log('requestAnimationFrame')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end');
- 87.
- 88. *Tries to graspwhy*
- 90.
- 91.
- 92. As part ofthe W3C HTML standard
- 93.
- 94. Globalcode – Open4education Heap MemoryAvailable Macrotask Queue listOnTimeout listOnTimeout Delayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Web API Runtime and Platform Abstraction Event Loop Task Scheduler Microtask Queue promiseReactionJob promiseReactionJob
- 95. After the endof each macrotask, drain the microtask queue https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model
- 96. But there areother relevant queues that looks like microtask’s https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model
- 97. Every event loopis made of phases https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model
- 99.
- 100.
- 101.
- 102. Window Resize Microtask RenderUpdateMacrotask
- 103. Window Resize Microtask RenderUpdate Scroll Steps Pending targets Macrotask
- 104. Window Resize Media Queries MicrotaskRender Update Scroll Steps Pending targets Macrotask
- 105. Window Resize Media Queries MicrotaskRender Update Scroll Steps Pending targets Animations Pending targets Macrotask
- 106. Window Resize Media Queries MicrotaskRender Update Scroll Steps Pending targets Fullscreen Pending events Animations Pending targets Macrotask
- 107. Window Resize Media Queries MicrotaskRender Update Scroll Steps Pending targets Animation Frame Fullscreen Pending events Animations Pending targets Macrotask
- 108. Window Resize Media Queries MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Fullscreen Pending events Animations Pending targets Macrotask
- 109. Window Resize Media Queries MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Fullscreen Pending events Animations Pending targets Macrotask
- 110. Window Resize Media Queries MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Callback list Fullscreen Pending events Animations Pending targets Macrotask
- 111. Window Resize Media Queries Intersections MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Callback list Fullscreen Pending events Animations Pending targets Macrotask
- 112. Paint Window Resize Media Queries Intersections MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Callback list Fullscreen Pending events Animations Pending targets Macrotask
- 113. Paint Window Resize Media Queries Intersections MicrotaskRender Update Checkpoint Scroll Steps Pending targets Animation Frame Callback list Fullscreen Pending events Animations Pending targets Macrotask Loop
- 114. Every tick runs allthis phases
- 115. So let’s debugour code
- 116. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame main Macrotask
- 117. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame main Macrotask
- 118. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame console.log main Macrotask
- 119. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame setTimeout main Macrotask
- 120. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame setTimeout main timeout1 Macrotask
- 121. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame requestAnimationFrame main timeout1 Macrotask
- 122. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame requestAnimationFrame main timeout1 reqAnimFrm1 Macrotask
- 123. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Promise.resolve main timeout1 reqAnimFrm1 Macrotask
- 124. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Promise.then main timeout1 reqAnimFrm1 promise1 Macrotask
- 125. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Promise.then main timeout1 reqAnimFrm1 promise1 promise2 Macrotask
- 126. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame console.log main timeout1 reqAnimFrm1 promise1 promise2 Macrotask
- 127. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame main timeout1 reqAnimFrm1 promise1 promise2 Macrotask
- 128. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise1 promise2 Macrotask
- 129. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise1 promise2 Microtask
- 130. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise2 Microtask <anonymous>
- 131. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise2 Microtask console.log <anonymous>
- 132. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise2 Microtask <anonymous>
- 133. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 promise2 Microtask
- 134. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Microtask <anonymous>
- 135. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Microtask console.log <anonymous>
- 136. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Microtask <anonymous>
- 137. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update
- 138. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update
- 139. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Window Resize
- 140. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update
- 141. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Scroll Steps
- 142. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update
- 143. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Media Queries
- 144. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update
- 145. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Animations
- 146. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update
- 147. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Fullscreen
- 148. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update
- 149. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 reqAnimFrm1 Render Update Animation Frame
- 150. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update <anonymous>
- 151. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Animation Frame <anonymous>
- 152. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update console.log <anonymous>
- 153. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Animation Frame console.log <anonymous>
- 154. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update <anonymous>
- 155. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Animation Frame <anonymous>
- 156. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update
- 157. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Animation Frame
- 158. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update
- 159. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Intersections
- 160. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Paint
- 161. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame timeout1 Render Update Paint
- 162. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Macrotask timeout1
- 163. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Macrotask <anonymous>
- 164. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame console.log <anonymous> Macrotask
- 165. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Macrotask <anonymous>
- 166. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Macrotask
- 167. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Microtask
- 168. Globalcode – Open4education DelayedTasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start'); setTimeout(() => console.log('timeout1'), 0); requestAnimationFrame(() => console.log('reqAnimFrm1')); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end'); Macrotask Queue Microtask Queue Animation Frame Render Update
- 169. Node.js console console.log('script start’); setTimeout(()=> console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’);
- 170. script start script end nextTick promise1 promise2 setTimeout setImmediate scriptstart script end promise1 promise2 nextTick setTimeout setImmediate B A C script start script end promise1 promise2 setTimeout setImmediate nextTick D script start script end promise1 promise2 setImmediate setTimeout nextTick
- 171. script start script end nextTick promise1 promise2 setTimeout setImmediate scriptstart script end promise1 promise2 nextTick setTimeout setImmediate B A C script start script end promise1 promise2 setTimeout setImmediate nextTick D script start script end promise1 promise2 setImmediate setTimeout nextTick
- 172. Node.js console console.log('script start’); setTimeout(()=> console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’);
- 174. Looks like Node.jshas some strangeness happening
- 175.
- 176.
- 177.
- 178. Globalcode – Open4education Heap MemoryAvailableDelayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Node.js API Runtime and Platform Abstraction Event Loop Task Scheduler Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks Task Queues
- 179. The queues are consumedin order, top-down
- 180. nextTick → microTask nextTick→ microTask nextTick → microTask nextTick → microTask nextTick → microTask nextTick → microTask Globalcode – Open4education Pending Callbacks Idle, Prepare Timers Poll Check Close Callbacks Checks timers that expired and call their callbacks Exhaust the pending queue: Delivers system error callbacks such as ECONNREFUSED Node.js internal Exhausts poll queue: Delivers callbacks for file reads, socket listening, incoming connections Exhausts "immediate" queue: Delivers callbacks for setImmediate calls Exhausts this callbacks queue: Delivers callbacks for socket close & destroy, errors setInterval, setTimeout server.listen socket.on('data') fs.readFile setImmediate socket.close() socket.destroy() Checkpoint Repeat socket.on('error')
- 182. nextTick → microTask nextTick→ microTask nextTick → microTask nextTick → microTask nextTick → microTask nextTick → microTask Globalcode – Open4education Pending Callbacks Idle, Prepare Timers Poll Check Close Callbacks Checks timers that expired and call their callbacks Exhaust the pending queue: Delivers system error callbacks such as ECONNREFUSED Node.js internal Exhausts poll queue: Delivers callbacks for file reads, socket listening, incoming connections Exhausts "immediate" queue: Delivers callbacks for setImmediate calls Exhausts this callbacks queue: Delivers callbacks for socket close & destroy, errors setInterval, setTimeout server.listen socket.on('data') fs.readFile setImmediate socket.close() socket.destroy() Checkpoint Repeat socket.on('error')
- 183. Node.js console console.log('script start’); setTimeout(()=> console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’);
- 184. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask main
- 185. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask console.log main
- 186. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask setTimeout main
- 187. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask setTimeout main
- 188. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask process.nextTick main
- 189. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask process.nextTick main
- 190. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask setImmediate main
- 191. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask setImmediate main
- 192. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask Promise.resolve main
- 193. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask Promise.then main
- 194. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask Promise.then main
- 195. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask Promise.then main
- 196. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask Promise.then main
- 197. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask console.log main
- 198. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask main
- 199. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask
- 200. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask <anonymous>
- 201. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask console.log <anonymous>
- 202. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask <anonymous>
- 203. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask
- 204. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask <anonymous>
- 205. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask console.log <anonymous>
- 206. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask <anonymous>
- 207. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask
- 208. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask <anonymous>
- 209. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask console.log <anonymous>
- 210. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask <anonymous>
- 211. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask
- 212. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask
- 213. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask <anonymous>
- 214. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask console.log <anonymous>
- 215. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask <anonymous>
- 216. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask
- 217. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask <anonymous>
- 218. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask console.log <anonymous>
- 219. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask <anonymous>
- 220. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask
- 221. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask
- 222. Globalcode – Open4education TaskQueue Delayed Tasks Call Stack Execution Contexts Event Loop Task Scheduler console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks nextTick microTask
- 223. Node.js console setTimeout(() =>{ console.log('script start’); setTimeout(() => console.log('setTimeout'), 0); process.nextTick(() => console.log(‘nextTick')); setImmediate(() => console.log('setImmediate'), 0); Promise.resolve() .then(() => console.log('promise1')) .then(() => console.log('promise2')); console.log('script end’); }, 0);
- 224. script start script end nextTick promise1 promise2 setTimeout setImmediate scriptstart script end nextTick promise1 promise2 setImmediate setTimeout B A
- 225. script start script end nextTick promise1 promise2 setTimeout setImmediate scriptstart script end nextTick promise1 promise2 setImmediate setTimeout B A
- 227. When a taskwill be executed depends on the phase it’s enqueued
- 228. setInterval on timer phase fulfilsat next tick
- 229. setImmediate on timer phase fulfilsat same tick
- 230. Previous phases can scheduletasks for next phases
- 231. Tasks scheduled ona queue that has already processed will be processed on next tick
- 232. That’s why script evaluationbehaves differently
- 233. The loop isn’tin any phase before the script is fully evaluated
- 234.
- 235. That diagram isan oversimplification
- 236. Globalcode – Open4education Heap MemoryAvailable Task Queue listOnTimeout listOnTimeout listOnTimeout listOnTimeout listOnTimeout Delayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Vendor APIs (Node, Web, GJS) Runtime and Platform Abstraction Event Loop Task Scheduler
- 237. Stuff ends upbeing like this on the Web
- 238. Globalcode – Open4education Heap MemoryAvailable Macrotask Queue listOnTimeout listOnTimeout Delayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Web API Runtime and Platform Abstraction Event Loop Task Scheduler Microtask Queue promiseReactionJob promiseReactionJob
- 239. And like thisin Node.js
- 240. Globalcode – Open4education Heap MemoryAvailableDelayed Tasks Call Stack write() saveFile() updateTime() tryOnTimeout listOnTimeout Execution Contexts Node.js API Runtime and Platform Abstraction Event Loop Task Scheduler Timers Pending Callbacks Idle, Prepare Poll Check Close Callbacks Task Queues
- 241.
- 242. JavaScript is popularon Node.js and Web
- 243. But you canuse it everywhere
- 244. You can buildyour own event loop tied to your needs
- 245. Make available your ownset of Vendor APIs
- 246.
- 247. Thanks Have a greatevent!
- 248.