Search code examples
javascriptasynchronouscallbackdom-eventsevent-loop

What is the difference between callback queue and event queue?

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

Solution

  • 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).