JS Execution Mechanism
It took only ten days for Netscape to design js. The original motivation was very simple. It was to add some interaction to the monotonous webpage, so it needed to operate the dom, so it was determined that it must be a single-threaded language. If it is multi-threaded, it will cause a problem to operate the DOM at the same time. If you add one and delete JS, you don’t know what to do, but under webWorker, you can enable multi-threading, but you are not allowed to operate DOM.
Single-threading means that all tasks need to be queued, and the subsequent tasks need to wait for the previous tasks to be executed before they can be executed. If the previous tasks take too long, the subsequent tasks need to wait all the time. Some tasks do not need to wait from the user's point of view. The task will wait forever, which is unacceptable from an experience point of view, so the concept of asynchrony appears in JS
Synchronous task
code is executed line by line from top to bottom
Asynchronous task
1. Macro task
script (overall code), setTimeout, setInterval, UI interaction event, postMessage, Ajax
2. Microtask
Promise.then catch finally, MutaionObserver, process.nextTick (Node.js environment)
operating mechanism
All synchronous tasks are executed in the main process to form an execution stack. Besides the main thread, there is also a "task queue". In the asynchronous task execution queue, macro tasks are executed first, and then all micro tasks in the current macro task are cleared. , and then proceed to the next tick to form a cycle. What is called a tick is that all the tasks in the microtask queue are executed once each time called a tick. The function of nextTick is to add the tasks in it to the end of the microtask queue.
There is a point to pay attention to here. Our code is actually written in the script, so all synchronous tasks are actually embedded in a large asynchronous task script, so it seems that the micro-tasks are executed first, but their logic This should be:
To understand the event loop, you must first have a deep understanding of the concepts of synchronization and asynchrony
Synchronization is most in line with human intuition, and there is a sequence, that is, the synchronization code on the second line is bound to be executed later than the first line, such as our common assignment operations, console printing, etc. are all synchronization tasks
Asynchronous: All non-synchronous tasks are asynchronous tasks. Specifically, it can be understood that this code cannot return the result immediately, or it may hinder the js main thread. At this time, the browser will open an asynchronous task queue (note the data structure here It is a 'queue', following the principle of first-in-first-out), and hang them one by one into the asynchronous task queue. In the task queue, the microtasks in this script code block are processed first, and then the macro tasks in the task queue are emptied. Here Processing actually refers to adding the tasks in the task queue to the execution stack of the js main thread according to the principle of first in first out (when there is no synchronous task in the execution stack, it will go to the task queue to find whether there is asynchronous Task)
Many people find it difficult to understand the concepts of single-thread and asynchronous. Why is js clearly single-threaded, and how can it be "distracted" to deal with asynchrony.
The single thread of js means that a browser page process has one and only one js execution thread, that is, the js main process, and only one piece of code is executing at the same time
The asynchronous mechanism is actually a mechanism based on the asynchronous model of js and implemented at run time. Although js execution is single-threaded, its runtime is not. For example, asynchronous requests are completed by two threads: the main thread of js execution and the event trigger thread. The execution thread of js will first initiate an asynchronous request to notify the browser. At this time, the browser will open an http request thread to execute the request. Call it a day, instead of waiting for the result to be returned, it will execute other codes, and then at some point in the future, the event-triggered thread will monitor that the previously initiated http request has been completed, and it will send the callback bound to the completion event The function is inserted into the asynchronous queue, and the request return result is passed to the parameter of the callback function. Another example is the timer task, which is executed by the timer thread of the browser, so its parameter is a callback function, which is convenient for adding the task into the task queue after the timer ends.
The so-called asynchronous implementation is actually completed by the communication between the js main thread and the browser Api (timers, xhr, dom, bom, etc. are actually browser Apis, which do not belong to js), and are actually executed on the js main thread. There is only the action of "notification", so there is no conflict between them. In fact, the whole process is the publish-subscribe mode.