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