Tushar Mukherjee
Explaining the Key Differences Between Browser JavaScript and Node.js Event Loops

Explaining the Key Differences Between Browser JavaScript and Node.js Event Loops

Tushar Mukherjee's photo
Tushar Mukherjee
·

5 min read

Comparison in the big picture 🌄

There are a few key differences between the event loop in browser JavaScript and the event loop in Node.js:

  • Execution environment:

    • While the event loop in Node.js runs inside a separate JavaScript runtime, the event loop in browser JavaScript runs inside a web browser.

    • This indicates that distinct APIs and resources are available to the event loops in these two settings.

  • Task Queue: Different sorts of jobs and events may be found in the task queues in browser JavaScript and Node.js.

    • The task queue in browser JavaScript may include tasks for DOM events, timers, or network requests.

    • The task queue in Node.js may contain tasks for managing processes, networking, or filesystem access.

  • Concurrency:

    • JavaScript for browsers and Node.js are both single-threaded, which means that all jobs and events are handled by a single event loop in each of them.

    • While JavaScript in browsers lacks this feature, Node.js can use a thread pool to carry out some activities concurrently with the event loop.

  • Execution order:

    • The criteria for selecting the sequence in which activities and events are carried out vary between the event loops in browser JavaScript and Node.js.

    • While Node.js utilizes a set of priority criteria in the event loop to decide the order in which tasks are executed, browser JavaScript typically executes jobs in the order that they are introduced to the task queue.

The event loop in the V8 JavaScript engine

  1. Call Stack

    • The events being processed by the event loop are stored in this data structure. A place where all functions are stored and executed on the basis of the LIFO (Last In First Out) method.

    • If the functions are related to a DOM, network request, or set timeout methods then they will be sent to the task queue.

    • Sub-components of v8's event loop:

      • heap memory data structure, to store variables and objects.

      • the call stack,

      • memory space, or the js code file to execute, and store functions to the stack.

    • If the call stack is filled out of memory then it will occur the error and makes the browser application not responsive.

  2. Web APIs

    • The main component is to execute some function to execute in multi-thread within the browser as it also consists of a v8 engine, which is 70% written in C++ by Google.

    • Web API takes the following functions,

      • DOM Events, ex: click, scroll, etc.

      • Network Requests: Fetch -> ( GET, POST, etc.), handled by C++ and the OS mainly.

      • Set timeout, set interval, etc.

      • After getting executed and processed by the processors through multithreading, it forwards the result to Callback Queue.

  3. Call-back Queue

    • After getting the process done in the Web API block, it gets queued inside the call-back queue which is managed by the event loop function of the v8 engine to return the completed process from to Call-Stack and then execute.

The event loop in Node.JS

  1. Call Stack ( Similar function as in V8 )

  2. V8 Engine, to parse all the basic javascript syntax to compile it within the V8 engine, as Node JS is built over the V8 engine.

  3. LIBUV (Unicorn Velociraptor Library)

    • It is a Node.js-specific multi-platform support library with an emphasis on asynchronous I/O.

    • It supports accessing the operating systems, file-system, networks, and many similar functions through the program.

    • It itself uses an event loop, which takes tasks to perform such that it should not get blocked in the server running node.js.

    • As libuv is 100% built on C++, it can run some codes or modules written in C++ as multi-threaded. Modules like a filesystem, and networking in nodejs.

    • It also includes the thread pool, the thread pool makes a function that is using features to target OS, file systems, networks, etc. to get done in multi-threading, through the help of OS using schedulers to send and receive the functions between the libuv and processors.

      Overall, libuv is a crucial component of Node.js that allows the platform to conduct non-blocking I/O operations efficiently and effectively.

  4. Node JS Modules

    • Node.JS modules give the feature to access the feature of the server, whether through accessing the files, networking, command line, etc.

TL;DR

  • Node Js is built on the browser's V8 engine, hence there would be some similarities and differences based on their functions and usage.

  • JS is browser-based to translate the web application code which uses DOM, network-request, and timeouts which could create the blockage, hence V8 engine's feature inside the event loop helps to run the function simply in a non-blocking manner.

  • Node.JS is a server-based language, which means to access the power of the server through the operating system. It could be the request to access file systems, OS, or networking and any similar usage, which is done mainly by the LIBUV library.

  • Node modules are also a top-up in node.js, to allow accessing the OS.

In Node.JS, because of libuv, which is written in c++ helps to go into multi-threading to process faster and non-blocking. LIBUV introduces the thread-pool feature to send the request to OS with the help of schedulers. By default thread pool uses 4 threads.

NOTE: This is just the big picture and there are other small parts in the event loop, like micro-task queue, raf queue, priority queue etc, for different purpose.

Explore them 😁

V8Node.jsEvent Looplibuvcallstack