Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[JS EXPERIENCE 2018] Javascript Event Loop além do setInterval - Derek Stavis

164 views

Published on

Javascript Event Loop além do setInterval - Derek Stavis

[JS EXPERIENCE 2018] - 5 de julho de 2018
São Paulo/SP

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[JS EXPERIENCE 2018] Javascript Event Loop além do setInterval - Derek Stavis

  1. 1. Globalcode – Open4education JavaScript Event Loop
  2. 2. JavaScript Recap
  3. 3. single threaded non-blocking asynchronous concurrent runtime
  4. 4. call stack event loop callback queue vendor APIs
  5. 5. Globalcode – Open4education Heap Memory Available 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
  6. 6. Globalcode – Open4education Heap Memory Available 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
  7. 7. Globalcode – Open4education call stack ∙ task queue ∙ event loop ∙ vendor APIs Vendor Dependent Vendor APIs
  8. 8. JavaScript has many implementations
  9. 9. Spidermonkey JavaScriptCore ChakraCore
 V8 XS
  10. 10. Web Node GJS Johnny Five
  11. 11. Demo
  12. 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. 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. 14. Node console.log('start'); process.nextTick(() => { console.log('nextTick callback'); }); console.log('scheduled'); https://nodejs.org/dist/latest-v10.x/docs/api/
  15. 15. GJS const { mainloop } = imports mainloop.timeout_add(1, () => log(“Hello World”)) mainloop.timeout_add(1, mainloop.quit) 
 mainloop.run() GJSdocs scattered around modules
  16. 16. Johnny Five // Blink an 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. 17. Globalcode – Open4education call stack ∙ task queue ∙ event loop ∙ vendor APIs ECMA 8.4 Jobs and Job Queues & ECMA 8.6 RunJobs() Call Stack
  18. 18. Globalcode – Open4education Task Queue 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()
  19. 19. Globalcode – Open4education Task Queue 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
  20. 20. Globalcode – Open4education Task Queue 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
  21. 21. Globalcode – Open4education Task Queue 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
  22. 22. Globalcode – Open4education Task Queue 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
  23. 23. Globalcode – Open4education Task Queue 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
  24. 24. Globalcode – Open4education Task Queue 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
  25. 25. Globalcode – Open4education Task Queue 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
  26. 26. Globalcode – Open4education Task Queue 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
  27. 27. Globalcode – Open4education Task Queue 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
  28. 28. Globalcode – Open4education Task Queue 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
  29. 29. Globalcode – Open4education Task Queue 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
  30. 30. Globalcode – Open4education Task Queue 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
  31. 31. Globalcode – Open4education Task Queue 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
  32. 32. Globalcode – Open4education Task Queue 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
  33. 33. Globalcode – Open4education Task Queue 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
  34. 34. Globalcode – Open4education Task Queue 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()
  35. 35. Globalcode – Open4education call stack ∙ task queue ∙ event loop ∙ vendor APIs And some of Event Loop Task Queue
  36. 36. Globalcode – Open4education Task Queue 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)
  37. 37. Globalcode – Open4education Task Queue 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)
  38. 38. Globalcode – Open4education Task Queue 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
  39. 39. Globalcode – Open4education Task Queue 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
  40. 40. Globalcode – Open4education Task Queue 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
  41. 41. Globalcode – Open4education Task Queue 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
  42. 42. Globalcode – Open4education call stack ∙ task queue ∙ event loop ∙ vendor APIs Vendor Dependent & Partially described in ECMA Event Loops
  43. 43. An infinite loop while (queue.waitForMessage()) { queue.processNextMessage(); }
  44. 44. Globalcode – Open4education Task Queue 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 tryOnTimeout listOnTimeout
  45. 45. Globalcode – Open4education Task Queue 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
  46. 46. Globalcode – Open4education Task Queue 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
  47. 47. Globalcode – Open4education Task Queue 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
  48. 48. Globalcode – Open4education Task Queue 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)
  49. 49. Globalcode – Open4education Task Queue 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)
  50. 50. Globalcode – Open4education Task Queue 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
  51. 51. Globalcode – Open4education Task Queue 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)
  52. 52. Globalcode – Open4education Task Queue 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)
  53. 53. Globalcode – Open4education Task Queue 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)
  54. 54. Globalcode – Open4education Task Queue 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)
  55. 55. Globalcode – Open4education Task Queue 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)
  56. 56. Globalcode – Open4education Task Queue 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. 57. Globalcode – Open4education Task Queue 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)
  58. 58. Globalcode – Open4education Task Queue 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)
  59. 59. Globalcode – Open4education Task Queue 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)
  60. 60. Globalcode – Open4education Task Queue 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)
  61. 61. Globalcode – Open4education Task Queue 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)
  62. 62. So that’s it for event loops, right?
  63. 63. The loop dequeues an event, dispatches the callback…
  64. 64. And setTimeout and setInterval adds callbacks to queue…
  65. 65. And every tick the loop consumes an item from the queue…
  66. 66. Then
  67. 67. You notice this:
  68. 68. Promise case console.log('script start'); 
 new Promise(resolve => { resolve(); console.log('executor'); }) .then(() => console.log('then'); 
 console.log('script end');
  69. 69. script start script end then
 executor B A C D script start then
 executor
 script end script start script end executor then script start then
 executor
 script end
  70. 70. script start then
 executor
 script end script start script end then
 executor B A C script start script end executor then D script start then
 executor
 script end
  71. 71. Surprise! Promise resolution enqueues a task!
  72. 72. And then someday
  73. 73. 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');
  74. 74. script start script end setTimeout promise1 promise2 script start script end promise1 promise2 setTimeout B A C script start setTimeout promise1 promise2 script end D script start promise1 promise2 setTimeout
 script end
  75. 75. script start script end
 setTimeout promise1 promise2 script start script end promise1 promise2 setTimeout B A C script start setTimeout promise1 promise2 script end D script start setTimeout promise1 promise2
 script end
  76. 76. ECMA says nothing* about event loops
  77. 77. *Looks for specs*
  78. 78. *Tries to grasp why*
  79. 79. HTML Event Loop html.spec.whatwg.org/multipage/ webappapis.html#event-loops
  80. 80. HTML specification defines additional event queues
  81. 81. As part of the W3C HTML standard
  82. 82. Globalcode – Open4education Heap Memory Available 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
  83. 83. After the end of each macrotask, drain the microtask queue https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model
  84. 84. Promise & MutationObserver callbacks https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model
  85. 85. Other relevant queues looks like microtask’s https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model
  86. 86. Paint Window Resize Media Queries Intersections Microtask Render Update Checkpoint Scroll Steps Pending targets Animation Frame Callback list Fullscreen Pending events Animations Pending targets Macrotask Loop
  87. 87. Every tick is made of these steps
  88. 88. Globalcode – Open4education Delayed Tasks 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
  89. 89. Globalcode – Open4education Delayed Tasks 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
  90. 90. Globalcode – Open4education Delayed Tasks 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
  91. 91. Globalcode – Open4education Delayed Tasks 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
  92. 92. Globalcode – Open4education Delayed Tasks 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
  93. 93. Globalcode – Open4education Delayed Tasks 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
  94. 94. Globalcode – Open4education Delayed Tasks 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
  95. 95. Globalcode – Open4education Delayed Tasks 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
  96. 96. Globalcode – Open4education Delayed Tasks 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
  97. 97. Globalcode – Open4education Delayed Tasks 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
  98. 98. Globalcode – Open4education Delayed Tasks 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
  99. 99. Globalcode – Open4education Delayed Tasks 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
  100. 100. Globalcode – Open4education Delayed Tasks 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
  101. 101. Globalcode – Open4education Delayed Tasks 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
  102. 102. Globalcode – Open4education Delayed Tasks 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>
  103. 103. Globalcode – Open4education Delayed Tasks 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>
  104. 104. Globalcode – Open4education Delayed Tasks 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>
  105. 105. Globalcode – Open4education Delayed Tasks 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
  106. 106. Globalcode – Open4education Delayed Tasks 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>
  107. 107. Globalcode – Open4education Delayed Tasks 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>
  108. 108. Globalcode – Open4education Delayed Tasks 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>
  109. 109. Globalcode – Open4education Delayed Tasks 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
  110. 110. Globalcode – Open4education Delayed Tasks 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
  111. 111. Globalcode – Open4education Delayed Tasks 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
  112. 112. Globalcode – Open4education Delayed Tasks 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
  113. 113. Globalcode – Open4education Delayed Tasks 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
  114. 114. Globalcode – Open4education Delayed Tasks 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
  115. 115. Globalcode – Open4education Delayed Tasks 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
  116. 116. Globalcode – Open4education Delayed Tasks 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>
  117. 117. Globalcode – Open4education Delayed Tasks 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>
  118. 118. Globalcode – Open4education Delayed Tasks 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>
  119. 119. Globalcode – Open4education Delayed Tasks 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
  120. 120. Globalcode – Open4education Delayed Tasks 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
  121. 121. Globalcode – Open4education Delayed Tasks 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
  122. 122. Globalcode – Open4education Delayed Tasks 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
  123. 123. Globalcode – Open4education Delayed Tasks 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>
  124. 124. Globalcode – Open4education Delayed Tasks 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
  125. 125. Globalcode – Open4education Delayed Tasks 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>
  126. 126. Globalcode – Open4education Delayed Tasks 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
  127. 127. Globalcode – Open4education Delayed Tasks 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
  128. 128. Globalcode – Open4education Delayed Tasks 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
  129. 129. 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’);
  130. 130. script start script end nextTick promise1 promise2 setTimeout setImmediate script start 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
  131. 131. 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);
  132. 132. script start script end nextTick promise1 promise2 setTimeout setImmediate script start script end nextTick promise1 promise2 setImmediate setTimeout B A
  133. 133. script start script end nextTick promise1 promise2 setTimeout setImmediate script start script end nextTick promise1 promise2 setImmediate setTimeout B A
  134. 134. Looks like Node.js has some strangeness happening
  135. 135. It happens that
  136. 136. NAMES
  137. 137. Node.js Event Loop https://nodejs.org/en/docs/guides/ event-loop-timers-and-nexttick/
  138. 138. Globalcode – Open4education Heap Memory AvailableDelayed 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
  139. 139. The queues are consumed in order, top-down
  140. 140. 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')
  141. 141. 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')
  142. 142. 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’);
  143. 143. Globalcode – Open4education Task Queue 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
  144. 144. Globalcode – Open4education Task Queue 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
  145. 145. Globalcode – Open4education Task Queue 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
  146. 146. Globalcode – Open4education Task Queue 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
  147. 147. Globalcode – Open4education Task Queue 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
  148. 148. Globalcode – Open4education Task Queue 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
  149. 149. Globalcode – Open4education Task Queue 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
  150. 150. Globalcode – Open4education Task Queue 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
  151. 151. Globalcode – Open4education Task Queue 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
  152. 152. Globalcode – Open4education Task Queue 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
  153. 153. Globalcode – Open4education Task Queue 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
  154. 154. Globalcode – Open4education Task Queue 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
  155. 155. Globalcode – Open4education Task Queue 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
  156. 156. Globalcode – Open4education Task Queue 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
  157. 157. Globalcode – Open4education Task Queue 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
  158. 158. Globalcode – Open4education Task Queue 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
  159. 159. Globalcode – Open4education Task Queue 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>
  160. 160. Globalcode – Open4education Task Queue 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>
  161. 161. Globalcode – Open4education Task Queue 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>
  162. 162. Globalcode – Open4education Task Queue 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
  163. 163. Globalcode – Open4education Task Queue 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>
  164. 164. Globalcode – Open4education Task Queue 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>
  165. 165. Globalcode – Open4education Task Queue 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>
  166. 166. Globalcode – Open4education Task Queue 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
  167. 167. Globalcode – Open4education Task Queue 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>
  168. 168. Globalcode – Open4education Task Queue 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>
  169. 169. Globalcode – Open4education Task Queue 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>
  170. 170. Globalcode – Open4education Task Queue 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
  171. 171. Globalcode – Open4education Task Queue 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>
  172. 172. Globalcode – Open4education Task Queue 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>
  173. 173. Globalcode – Open4education Task Queue 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>
  174. 174. Globalcode – Open4education Task Queue 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
  175. 175. Globalcode – Open4education Task Queue 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>
  176. 176. Globalcode – Open4education Task Queue 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>
  177. 177. Globalcode – Open4education Task Queue 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>
  178. 178. Globalcode – Open4education Task Queue 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
  179. 179. Globalcode – Open4education Task Queue 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
  180. 180. 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);
  181. 181. script start script end nextTick promise1 promise2 setTimeout setImmediate script start script end nextTick promise1 promise2 setImmediate setTimeout B A
  182. 182. script start script end nextTick promise1 promise2 setTimeout setImmediate script start script end nextTick promise1 promise2 setImmediate setTimeout B A
  183. 183. Recap
  184. 184. That diagram is an oversimplification
  185. 185. Globalcode – Open4education Heap Memory Available 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
  186. 186. Stuff ends up being like this on the Web
  187. 187. Globalcode – Open4education Heap Memory Available 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
  188. 188. And like this in Node.js
  189. 189. Globalcode – Open4education Heap Memory AvailableDelayed 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
  190. 190. So check runtime’s documentation
  191. 191. JavaScript is popular on Node.js and Web
  192. 192. But you can use it everywhere
  193. 193. You can build your own event loop tied to your needs
  194. 194. That’s all folks
  195. 195. Thanks Have a great event!

×