The document discusses the JavaScript event loop model. It explains that JavaScript is single-threaded but asynchronous and non-blocking. It uses a call stack, task queue, and event loop to handle concurrency. Functions are added to the call stack and run synchronously until complete, after which they are removed from the stack. Asynchronous functions like timeouts and intervals add callbacks to the task queue to be run asynchronously by the event loop. The event loop continually checks the call stack and task queue, running any queued callbacks after the stack is empty. This allows for asynchronous and concurrent behavior despite single-threading.

1. Globalcode – Open4education
JavaScript Event Loop

2. JavaScript
Recap

3. single threaded
non-blocking
asynchronous
concurrent
runtime

4. call stack
event loop
callback queue
vendor APIs

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. 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. Globalcode – Open4education
call stack ∙ task queue ∙ event loop ∙ vendor APIs
Vendor Dependent
Vendor APIs

8. JavaScript has many
implementations

9. Spidermonkey
JavaScriptCore
ChakraCore
V8
XS

10. Web
Node
GJS
Johnny Five

11. Demo

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('nextTick callback');
});
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 scattered around modules

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. Globalcode – Open4education
call stack ∙ task queue ∙ event loop ∙ vendor APIs
ECMA 8.4 Jobs and Job Queues & ECMA 8.6 RunJobs()
Call Stack

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Globalcode – Open4education
call stack ∙ task queue ∙ event loop ∙ vendor APIs
And some of Event Loop
Task Queue

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. 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. 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. 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. 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. 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. Globalcode – Open4education
call stack ∙ task queue ∙ event loop ∙ vendor APIs
Vendor Dependent & Partially described in ECMA
Event Loops

43. An infinite loop
while (queue.waitForMessage()) {
queue.processNextMessage();
}

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. So that’s it for event
loops, right?

63. The loop dequeues an
event, dispatches the
callback…

64. And setTimeout and
setInterval adds
callbacks to queue…

65. And every tick the loop
consumes an item from
the queue…

66. Then

67. You notice this:

68. Promise case
console.log('script start');
new Promise(resolve => {
resolve();
console.log('executor');
})
.then(() => console.log('then');
console.log('script end');

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. 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. Surprise!
Promise resolution
enqueues a task!

72. And then someday

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. 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. 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. ECMA says nothing*
about event loops

77. *Looks for specs*

78. *Tries to grasp why*

80. HTML Event Loop
html.spec.whatwg.org/multipage/
webappapis.html#event-loops

81. HTML specification
defines additional
event queues

82. As part of the W3C
HTML standard

83. 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

84. After the end of each
macrotask, drain the
microtask queue
https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model

85. Promise &
MutationObserver
callbacks
https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model

86. Other relevant queues
looks like microtask’s
https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model

87. 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

88. Every tick is made of
these steps

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. 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

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
console.log
main
Macrotask

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
Macrotask

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
setTimeout
main
timeout1
Macrotask

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
Macrotask

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
requestAnimationFrame
main
timeout1
reqAnimFrm1
Macrotask

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.resolve
main
timeout1
reqAnimFrm1
Macrotask

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
Macrotask

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
Promise.then
main
timeout1
reqAnimFrm1
promise1
promise2
Macrotask

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
console.log
main
timeout1
reqAnimFrm1
promise1
promise2
Macrotask

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
main
timeout1
reqAnimFrm1
promise1
promise2
Macrotask

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
Macrotask

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
promise1
promise2
Microtask

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
<anonymous>

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
console.log
<anonymous>

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
<anonymous>

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
promise2
Microtask

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
<anonymous>

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
console.log
<anonymous>

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
Microtask
<anonymous>

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

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
Window Resize

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
Scroll Steps

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
Media Queries

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
Animations

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
Fullscreen

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
reqAnimFrm1
Render Update
Animation Frame

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
<anonymous>

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
console.log
<anonymous>

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
<anonymous>

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
Animation Frame

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
Intersections

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
timeout1
Render Update
Paint

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
timeout1

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
Macrotask
<anonymous>

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
console.log
<anonymous>
Macrotask

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
<anonymous>

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
Macrotask

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
Microtask

129. 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

130. 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’);

131. 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

132. 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);

133. script start
script end
nextTick
promise1
promise2
setTimeout
setImmediate
script start
script end
nextTick
promise1
promise2
setImmediate
setTimeout
B
A

134. script start
script end
nextTick
promise1
promise2
setTimeout
setImmediate
script start
script end
nextTick
promise1
promise2
setImmediate
setTimeout
B
A

136. Looks like Node.js has
some strangeness
happening

137. It happens that

138. NAMES

139. Node.js Event Loop
https://nodejs.org/en/docs/guides/
event-loop-timers-and-nexttick/

140. 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

141. The queues are
consumed in order,
top-down

142. 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')

144. 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')

145. 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’);

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
main

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
console.log
main

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
setTimeout
main

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
setTimeout
main

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
process.nextTick
main

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
process.nextTick
main

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
setImmediate
main

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
setImmediate
main

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.resolve
main

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. 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

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
Promise.then
main

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
Promise.then
main

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
console.log
main

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
main

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

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
<anonymous>

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
console.log
<anonymous>

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
<anonymous>

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

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
<anonymous>

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
console.log
<anonymous>

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
<anonymous>

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

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
<anonymous>

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
console.log
<anonymous>

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
<anonymous>

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

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
<anonymous>

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
console.log
<anonymous>

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
<anonymous>

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

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
<anonymous>

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
console.log
<anonymous>

180. 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>

181. 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

182. 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

183. 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);

184. script start
script end
nextTick
promise1
promise2
setTimeout
setImmediate
script start
script end
nextTick
promise1
promise2
setImmediate
setTimeout
B
A

185. script start
script end
nextTick
promise1
promise2
setTimeout
setImmediate
script start
script end
nextTick
promise1
promise2
setImmediate
setTimeout
B
A

187. Recap

188. That diagram is an
oversimplification

189. 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

190. Stuff ends up being like
this on the Web

191. 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

192. And like this in Node.js

193. 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

194. So check runtime’s
documentation

195. JavaScript is popular on
Node.js and Web

196. But you can use it
everywhere

197. You can build your own
event loop tied to your
needs

198. That’s all folks

199. Thanks
Have a great event!