Let us explore the structures that go into the event loop.
What Is a Stack/Queue?
- A stack is a data structure in which things that came last are executed first.
- Queue – the thing that comes first will be executed first.
- Web APIs – additional interfaces provided by the browser. They run on separate browser threads. These include methods related to timers (e.g., setTimeout), sending XHR requests (XMLHttpRequest class), or manipulating and responding to events from the DOM tree.
A Web API from subsequent data structures that decide which elements are more important to execute in the browser. We have the main thread and the side threads, but at some point, we have to decide when to transfer the result to the main thread. And here we can decide if there are two things waiting for us at the same time, which of these things is more important.
We divide the queues into macro and micro tasks and a rendering queue. They contain function calls indicated as callbacks to asynchronous methods from the Web API. (setTimeout, setInterval, xhr, querySelector). The event loop executes tasks as long as it has such tasks to perform. First the micro, then the macro ones. In the case of rendering, the event loop processes what is in the queue and nothing else. If something comes along, it has to wait.
- Synchronous: executed line by line. What is specific here is that we can only execute one piece of code at a time. Once we start it, we are unable to do anything until it is done.
- Asynchronous: can be executed in parallel to the rest of the application without disturbing it, but also the result of the action is not immediate. Example: querying the API and animating at the same time.
What Is the Event Loop?
The event loop determines the order in which the code will run. It brings the synchronous and asynchronous worlds together. If we do something in turn, we have access to it. If we delegate something, we would like to be able to keep the value from it later. For example, make a query to the server to retrieve data – not only do we want the data to be retrieved, but we also want to receive it. And since we have gone somewhere further with our code, we need to have some mechanism in place to pick up that data in the future.
To understand what an event loop is and to learn all its mechanisms, we need to distinguish between the two concepts, which are the synchronous and asynchronous code. The synchronous code is the one that, when called, calls itself line by line, has no side effects and will be executed from A to Z, exactly what was called. The asynchronous code, on the other hand, is a code that, at certain stages of the call, part of the code is delegated to be called in a separate thread or at another time. For example, we want to create an animation and download data from the server at the same time. If we did this in the synchronous code, we would either have to wait for the data or show an animation. In the asynchronous code, we can alternate tasks at the same time. We will not notice this because it will be managed by the browser.
Credit: Source link