6

In some of the online resources on asynchronous behavior of JavaScript, concepts like browser architecture, call stack, event loop and event queue are also mentioned. While describing the workings of browser event loop, some use the word event queue while others callback queue. I am confused by those terms and would like to know if they refer to the same queue data structure which is used in browsers or are they different and are used it to handle different scenarios?

Figure 1 -

enter image description here

Figure 2 -

enter image description here

Improve this question

2 Answers 2

Reset to default
5

In the HTML's nomenclature (which defines the browser's event-loop), both are incorrect.

What we have are "task-sources", which all may map to different task-queues.
At the beginning of the event-loop processing, the User Agent will choose from which task-queue it will execute the next task. This task may itself fire events, or invoke callbacks.

These tasks are queued by various means, either as part of other tasks (e.g after a task started a work in parallel, it will ask to queue a task when that parallel work is done), either from IPC messages directly (e.g user initiated events).

Note also that there is a part of the event-loop where callbacks are invoked and events fired directly by the event-loop, and not from a task: Update the rendering.
In there you'll find a map of callbacks and various events (scroll, resize, mediaqueries etc.) that are called as part of this special place in the event-loop, which itself gets called only once in a while (generally when the monitor sends a V-Sync signal).

Improve this answer
2
  • Thank you so much for explain the process of event loop right way, It is make scene to call it task queues where there are other concepts also exist in browser Eco system such as micro task queues. Can you pls recommend quality resources to grasp these concepts right way? (links other than mentioned above )
    – Aravinda Meewalaarachchi
    Commented May 17, 2021 at 2:53
  • 1
    microtasks are yet an other beast, they can be selected as the main task only in very specific cases (long-tasks). The microtask-queue works completely differently in that it will get emptied various times during a single event-loop iteration (in "microtask-checkpoints", every time the JS call stack is empty, and after some callback calls. The reference talk about all these is Jake Archibald's In the loop which is both quite correct it what it says, and accessible, then I wrote a few answers on the subject.
    – Kaiido
    Commented May 17, 2021 at 5:26
0

Inside the callback queue, the tasks are broadly classified into two categories, namely microtasks and macrotasks (often referred as tasks).

Macrotasks get added to the macrotask queue when:

  • A new JavaScript program or subprogram is executed (such as from a console, or by running the code in a  element) directly.
  • An event fires, adding the event's callback function to the macrotask queue.
  • A timeout or interval created with setTimeout() or setInterval() is reached, causing the corresponding callback to be added to the task queue.

A microtask is a short function which is executed after the function or program which created it exits and only if the JavaScript execution stack is empty, but before returning control to the event loop being used by the user agent to drive the script's execution environment.

Microtasks come solely from our code. They are usually created by promises: an execution of .then/catch/finally handler becomes a microtask. Microtasks are used “under the cover” of await as well, as it’s another form of promise handling.

In literature you will often see that they refer to macrotasks as tasks, and microtasks as jobs.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.