Search code examples
javascriptevent-looptask-queue

Is execution of main thread javascript code a macro-task?


I was reading this blog about event loop and micro/macrotask queues in javascript but I have doubts about the statements from the blog:

In JavaScript, no code is allowed to execute until an event has occurred. It is worth mentioning that the execution of a JavaScript code execution is itself a macro-task.

Macro-tasks include parsing HTML, generating DOM, executing main thread JavaScript code, and other events such as page loading, input, network events, timer events, etc. Examples: setTimeout, setInterval, setImmediate,requestAnimationFrame, I/O, UI Rendering.

What I know is that execution of the javascript code can't be macro-task unless it is user interaction like a click, setTimeout etc.

I don't get this beacause all I know is that macrotasks and microtask are generally asynchronous operations and execution of main thread javascript code is synchronous codes like console.log("hello") . Correct me please if I am mistaken.

By the way, I'm referring to the execution of main thread JavaScript code in the context of script tag in html within a browser environment. Also let's assume that script is linked as a external file(not directly embedded within HTML)


Solution

  • It depends on what kind of script you're talking about, and which environment.

    For HTML, most of the time you'll be in a task (there is no such thing as a macrotask, only tasks and microtasks).

    For instance inline scripts met by the parser when the browser navigates will be executed from the global task the navigate algorithm queued. External scripts will be executed from the fetch task that got queued when fetching the script's content. defer scripts will be executed after the browser spinned the event loop, which will itself queue a task to then run the script.

    But, you could force being in a microtask too. For instance doing

    queueMicrotask(() => document.write("<script>alert('from a microtask')<\/script>"));

    Here when the parser meets the inline script, it's still in the microtask that launched it, so the script is executed from that microtask.


    In node, CommonJS scripts are executed from ... a magic point which is called the main module. It's not really a task, but it's not a microtask. ESM scripts on the other hand are executed from a microtask(, itself queued from an IO task).