Async: how it is handled internally in JS (Tasks, Microtasks/Jobs, Queues, Schedule)

I have found this wonderful step-by-step-diagramms in an article from I want to share with you: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/ It also contains an example with event bubbling 🙂

In summary:

  • Tasks execute in order, and the browser may render between them
  • Microtasks execute in order, and are executed:
    • after every callback, as long as no other JavaScript is mid-execution
    • at the end of each task