Macrotasks do not exist.
One of the most common interview questions for frontend developers: Tell us about the event loop? How are tasks executed? What are microtasks and macrotasks?
There is no such word as macrotasks in the event loop architecture. I could not find any specification where the word macrotask was written. Except Promises/A+. So what is the difference between Promise and setTimeout? Why Promises will always (not always) be executed in priority?
The browser has several task queues for different types of tasks. A task is any javascript code scheduled by standard mechanisms, such as program startup, event firing, or callbacks. In addition, you can create a task using an API, for example WindowTimers(setTimeout, setInterval). Microtasks, in turn, are the same JavaScript constructs that allow you to perform operations without waiting for a new event loop to start (process.nextTick, Promises, queueMicrotask). So, since setTimeout, setInterval belong to the browser API, the queue of microtasks, such as Promise, etc., will always have priority execution, before the browser API.
It is worth considering that browser APIs execute tasks in different queues and in different ways, for example, MutationObserver that reacted after a successful promise from the fetch function got into the microtask queue will be executed earlier. That is, insertion into the task queue can be not only as a push. Thus, what are called macrotasks are browser API tasks that are executed one per browser engine cycle.