What is the difference between callback queue and event queue?

Question

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 -

Figure 2 -

Answer 1

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 (eg 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 (eg 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).

Answer 2

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.