The internal operating mechanism of the "JS" JavaScript engine

First look at a small program:

<script> alert (' 1th ');      SetTimeout (function () {alert (' 2nd ');}, 2000); Alert (' 3rd ');</script>

The output sequence is: 1th, 3rd, 2nd; and then look at a small program:

<script> alert (' 1th ');      SetTimeout (function () {alert (' 2nd ')}, 0); Alert (' 3rd ');</script>

Output order: 1th, 3rd, 2nd; You might ask why not 1, 2, 3;settimeout the interval is set to 0 is not immediately executed? This leads to the operation mechanism of the key--javascript: Event Loop.

Task queue for JavaScript

Because JavaScript is single-threaded, all tasks can only be executed one after the other, but when reading large files like Io, the latter is waiting for a long time to wait until the previous task finishes executing before a task can begin.

because of this, JavaScript is also designed as the main thread to perform the subsequent tasks first, regardless of the IO device, and the IO device returns the result and goes back to execution.

Therefore, in JavaScript, all tasks can be divided into two types: one is the synchronization task (synchronous), and the other is the asynchronous task (asynchronous). The synchronization task is: On the main thread, you must wait for the previous task to finish, to perform the latter task, the asynchronous task is: Do not enter the main thread, but into the task queue Task, the main thread is only in the task queue to be notified, An asynchronous task can execute, and the asynchronous task will go into the main thread execution.

In fact, the "task queue" is a queue of events, the main thread reads "Task queue", is to read the events inside. These events typically include an IO device's events, clicks, and scrolling events, usually specifying a callback function (callback), which goes into the task queue when it occurs. The asynchronous task must specify a callback function, and the main thread executes the asynchronous task, which is to execute the corresponding callback function.

Otext.innertext = ' something ';

For example, in a certain page, after executing the above code, the contents of the DOM will change, then the system triggers the DOM changed event, generates an asynchronous callback, and the callback function is added to the task queue.

Event Loop

1. The synchronization task executes on the main thread to form an "execution stack" (execution context stack);

2. The asynchronous task has a running result in the task queue and the event is placed in the task queue;

3. When the synchronization task in the "execution stack" is completed, the task queue will have a running result (event, such as: Mouse Clicks, Key presses, timed events, etc.) of the asynchronous task into the "execution stack" to start execution;

The process of reading an event from the task queue by the main thread is constantly circulating, and this mechanism is called the event loop.

Event Loop diagram:

As long as the task executes in the execution stack, it reads the task queue and executes the callback function corresponding to each event.

Now it's time to understand why the settimeout interval is set to 0 at the beginning, and it's finally executed, because the callback function in the task queue executes when the code in the execution stack finishes executing. (This is also why some books will sometimes write the callback function in settimeout () The time interval is not the value set later)

The internal operating mechanism of the "JS" JavaScript engine