Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – JS: Doubts about Eventloop and Global Execution Context

In vanilla JS can eventloop take a function from the callback queue and push it onto the callstack even before the JS engine completes executing Global Execution Context.

Tags:

2

Answers


  1. 0

    The "event loop" is not ECMAScript ("vanilla") terminology. The specification does however define some rules that a host should follow when dealing with jobs. One of those rules is that the engine does not initiate any queued jobs while JavaScript code is still executing. A job only gets its turn when code has run to completion and the call stack is empty.

    See the ECMAScript spec on Jobs and Job Queues:

    Execution of a Job can be initiated only when there is no running execution context and the execution context stack is empty.

    And also Jobs and Host Operations to Enqueue Jobs:

    Their implementations must conform to the following requirements:

    • At some future point in time, when there is no running context in the agent for which the job is scheduled and that agent’s execution context stack is empty, the implementation must:

      1. Perform any host-defined preparation steps.
      2. Invoke the Job Abstract Closure.
      3. Perform any host-defined cleanup steps, after which the execution context stack must be empty.

    • Only one Job may be actively undergoing evaluation at any point in time in an agent.

    • Once evaluation of a Job starts, it must run to completion before evaluation of any other Job starts in an agent.

    Login or Signup to reply.
  2. 0

    No, in vanilla JavaScript, the event loop cannot take a function from the callback queue and push it onto the call stack before the JavaScript engine (example V8) completes executing the Global Execution Context.

    JavaScript Execution

    1. Call Stack: A stack with all function calls. The function at the top is executed.
    2. Execution Context: When the JavaScript engine receives a JavaScript file, it creates a global execution context (GEC). When a function is called, it creates a function execution context (FEC). When the context is created, it does three things:
      • Variable Environment: stores and hoists variables and function declarations
      • Lecical Environment: creates a scope chain so that variables and function declarations are available only within their scope
      • this: creates the "this" keyword that refers to the execution context, and is different for GEC and FEC.
    3. Task Queue: A queue of functions waiting to be executed after asynchronous operations complete.
      • Macrotasks: setTimeout, setInterval, setImmediate, I/O events, UI rendering events.
      • Microtasks: Promise callbacks (.then(), .catch(), .finally()), MutationObserver callbacks, process.nextTick()
    4. Event Loop: A loop that continuously checks the Call Stack and the Task Queues. It pushes tasks from the queues to the Call Stack when the Call Stack is empty.

    JavaScript Event Loop – Execution Order

    1. Synchronous Code: The JavaScript engine starts by executing synchronous code in the global execution context (GEC).
    2. Asynchronous Code (Macrotask): The event loop picks the next macrotask from the macrotask queue and executes it.
    3. Asynchronous Code (Microtasks): All microtasks are executed after each macrotask. If executing a microtask enqueues more microtasks, they are added to the microtask queue and will be executed in the same iteration.
    4. Render Updates (browser only): The browser may perform UI updates on the mainthread (like requestAnimationFrame)
    5. repeat: The event loop moves back to step 2 to process the next macrotask.

    Further reading

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search