This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

JS is single threaded, JS is asynchronous. So how can a single thread be asynchronous? The event loop mechanism is how to deal with, the content involves more points, so it is divided into two chapters to expand the introduction, in the above, mainly to understand the important concepts involved in JS.

Relevant concepts

Before answering the questions in the introduction, understand a few concepts.

  • Process gave a graphic example in an article he read about a factory with limited power supply for only one workshop at a time. That is, while one workshop is working, the others must be shut down. In computers, this means that a single CPU can only run one task at a time. For a computer, every application is a process, and every application has many functional modules, which are actually implemented by child processes. The application can be described as multi-process in terms of the way the subprocess is extended.

A process is like a factory floor; it represents a single task that the CPU can handle. Processes are independent of each other. At any one time, the CPU is always running one process and the other processes are not running. The CPU uses a time-slice rotational schedule algorithm to run multiple processes simultaneously.

  • The thread continues with the process example above. In each workshop, there can be many workers, sharing all the resources in the workshop, and they collaborate on a task.

Threads are like workers in a workshop. A process can include multiple threads that share process resources.

  • A single-threaded JS engine has only one thread (the main thread) responsible for parsing and executing JS code.

Js is single-threaded, which means it can only do one thing at a time, one Ajax request, and the main thread will do other things while waiting for its response. The browser first registers the Ajax callback function in the event table, and when the response comes back, the callback function is added to the task queue, which will not cause the thread to block. So js handles Ajax requests asynchronously.

  • asynchronousThe tasks of JS are divided intosynchronousandasynchronous.Synchronization taskIt is directly queued for execution on the main thread. The next task can be executed only after the previous task is completed.Asynchronous tasksWill be put into the task queue, if there are multiple asynchronous tasks, it is the task queue waiting in line, task queue is similar to a buffer, the task will be moved to the next call stack, and then the main thread on the call stack mission (asynchronous task is not to enter the main thread, and into the task of “task queue”, only “task queue” to inform the main thread, An asynchronous task is not executed until it is ready to be executed.
  • The process of checking whether the call stack is empty and determining which task to add to the call stack is the event loop, and the core of JS asynchronous implementation is the event loop.

– Call stack is a stack structure. A function call will form a stack frame, which contains the context information such as the parameters and local variables of the current executing function. After the function is executed, its execution context will pop out from the stack. – containing the js code of whole macro task, event callback, XHR callback, the timer (setTimeout/setInterval/setImmediate), IO operations, UI render. – Microtasks Tasks that update application state, including promise callbacks, MutationObserver, process.nextTick, object. observe.

JS has a main process and a call stack, and while the tasks in the call stack are executed, other tasks have to wait. In the execution process, asynchronous operations such as setTimeout will be handed to other modules of the browser for processing. When the delay execution time specified by setTimeout is reached, the task will be put into the task queue. Generally, the callback functions of different asynchronous tasks are placed in different task queues. After all tasks in the call stack are completed, the callback functions in the task queue are executed

In the figure above, when DOM operations, Ajax requests, setTimeout and other WebAPIs are encountered in the call stack, they are handed over to other modules of the browser kernel for processing. Besides the Javasctipt execution engine, the WebCore module is an important module of the WebKit kernel. For the three apis mentioned in the figure, Webcore provides DOM Binding, Network, and Timer modules respectively to handle the underlying implementation. When these modules finish processing these operations, they put the callback function into the task queue, and then execute the callback function in the task queue after the task in the stack finishes executing.

conclusion

As the first part of the event loop mechanism, I mainly introduced related concepts. What kind of process is the event loop mechanism, which will be explained in detail in the next part.