Microtasks vs Events and how to define what as which?

Question

I was reading through the event loop understanding for dart at their website:

https://www.dartlang.org/articles/event-loop

but i seem to be confused. I understand the order of main items then micro then events, but where i am confused really is practical implementation.

What would really define a Microtask as opposed to an Event, and can they be interchanged?

After looking at this chart, and some examples showing the print out orders of things, i was curious as to what makes them unique? It seems like both can be blocks of code, but the difference is the level of importance.... sort of like: Normal, Elevated, and Critical..

In a sample, a program runs but there is a character-input which is critical as it requires immediate feed back, and then events which are sort of components which finish in due time, but are not critical, and need to be pulled out of the current running program (thinking, something like creating a new thread which executes independently, and will return some data, or execute some code upon completion).

If someone can greater clarify the differences between the two elements, that would be fantastic.

Answer 1

The difference between events and microtasks is basically one of priority. If there is a scheduled microtask, it always runs before the next scheduled event. Events are run when the microtask queue is empty and there is a pending event. In many cases, that is the only difference - you can schedule something with a timer or as a microtask, and the microtask will only be preceeded by other microtasks.

Another way to look at the same thing is that a microtask always belong to a single event, the most recent one, which scheduled the microtask (directly or through other microtasks), and all microtasks it schedules itself will belong to the same event.

In a browser, there is a further distinction - microtasks run before the next page reflow. It's like a page reflow is a non-Dart event run by the event loop between other events. If you do a bunch of page DOM updates in a sequence of microtasks, they will all be done before the page is updated. If you do them in consecutive events, the page will be updated between the changes, which is not always what you want.

Some browser operations provide a resource (e.g., a database connection) that is only valid during the current event. That is where it's important that microtasks are considered part of the previous event - the resource is still valid during the following microtasks. This was one of the reasons for introducing microtasks to begin with.

Since microtasks preempt events, it means that running an infinite chain of microtasks will starve the browser and never update the page, so if you want to do a lot of computation and update the page along the way (like with a progress bar), you need to go back to the event loop often to keep the page responsive.

You can think of the initial call to main as an event, and microtasks will be run after it completes, before any other events.

Answer 2

Microtasks are sub-tasks of events. If you schedule microtasks, they are executed async but before the next event is processed. So, when the microtask queue is empty, the next task from the event queue is process. When main is processed and the event queue is empty the application exits.

A great article that explains in more detail what @lrn wrote about tasks and micro-tasks in the browser.