Examples of Web APIs
Document Manipulation: Utilizing the DOM (Document Object Model) for interactive web content manipulation and organization.
- Server Data Retrieval: Employing the Fetch API to seamlessly retrieve data from servers.
- Timer Functions: Utilizing APIs to manage and trigger time-based operations within web applications.
- Graphics Drawing and Manipulation: Leveraging the Canvas API and WebGL API for graphical content creation and manipulation on web platforms.
- Audio and Video Handling: Utilizing APIs like the Web Audio API and WebRTC API for audio/video streaming and manipulation.
- Device-Related Functions: Utilizing the Geolocation API to access location-based services on web applications.
- Client-Side Storage: Leveraging Web Storage API and IndexedDB API for efficient client-side data storage and retrieval within browsers.
The Task Queue functions as a message queue where each message corresponds to an associated function for execution. Here are its key characteristics:
- Messages follow a First-In, First-Out (FIFO) processing order.
- It enables the execution of code after the completion of API calls.
- Within the Event Loop, once the call stack is clear, the runtime proceeds to process the oldest message in the queue by invoking its functions and adding them to the Call Stack.
- Function execution continues until the Call Stack is empty, after which the next message in the queue is processed.
The Task Queue is sometimes referred to as the "Event Queue" or "Callback Queue." Tasks are added to this queue when an event triggers a callback or when a specified timeout/interval expires.
The Microtask Queue is similar to the task queue but has higher priority. It handles Microtask callbacks, including promise handlers and mutation observers.
Microtasks consist of concise functions executed after the parent function or program finishes, but only when the Call Stack is clear. Some essential aspects of microtasks include:
- Microtasks have the capability to enqueue additional microtasks, and these subsequently queued microtasks execute before the next task initiates, all within the same event loop iteration.
- They are designed to handle actions that require immediate execution following the current script, such as responding to a series of actions or implementing asynchronous functionality without incurring the overhead of a completely new task.
- Continuously monitoring the status of the call stack to determine if it's empty.
- Upon encountering an empty call stack, all pending Microtasks from the Microtask Queue are introduced into the call stack.
- When both the call stack and Microtask Queue are devoid of tasks, the event loop proceeds to dequeue tasks from the Task Queue and execute them.
1// Event loop algorithm
20. Dequeue and execute the oldest task from the task queue.
31. Execute all Microtasks:
4 - While the microtask queue is not empty:
5 - Dequeue and execute the oldest microtask.
62. Render any pending changes.
73. If the task queue is empty, wait for a new task.
84. Go back to step 1.
In Node.js, the Event Loop shares similarities with the browser environment, yet it diverges in its handling of I/O operations and event-driven code. Node.js leverages a unique array of modules like
fs for file system operations and
http for constructing HTTP servers, pivotal to its event-driven architecture while maintaining the core concepts of the Event Loop and Task Queue.
Empower your vision, partner with us today