This main stack works by continuously adding functions to the top of a call stack. If functions are added within other functions, those are added to the top before they are eventually returned. The stack works on a last in, first out basis, so a function that runs inside another function will return before the outer function does.This will continue all the way down through the application from the top of the file to bottom, reading right to left.
The implementation of microtasks allows for two important features. First, is easy to read error catching through the use of the reject callback. The other is the ability to determine when data gets changed. Most of the time this is advantageous because it gives the developer extra control over when and how data is updated on the part of an application that the user cannot see, hopefully preventing issues. Once all of the microtasks are all completed the engine will then move on to the macrotask queue to complete the events there.
The macrotask queue handles things like user events and other asynchronous code that we might not want to disrupt from the flow of an application. The article Event loop: microtasks and macrotasks gives a couple of great examples. The one I feel is most practical for developers would be highlighting different parts of a page based on syntax. That is something processor heavy that the user doesn’t have much control over, and needs to get done to update the webpage.
However, if the user would want to interact with the web page during that time we would want to allow that to occur. How can we ensure that happens? One solution is to break up the task into multiple calls to separate macrotasks which are then triggered after the first one completes. This way if the user decides they want to interact with the page their action will be added to the queue in between the processor heavy task, and still allow them to take action.
The article above also gives a good example through the use of an incrementation calculation, however it also references the use of a “web-worker” which doesn’t have any ability to interact directly with the web page document object so it will not block the user from performing other tasks while a calculation is being run. That web worker use and functionality seems like a good thing to research next.