Try to be clear: JS code operation mechanism

First, JS operating mechanism

JS execution engine

Often read the article about JS is a thread, in fact, this statement is very vague, accurate is the JS execution engine is single-threaded, JS execution engine is the execution of JS code, with this concept can come down to say how JS is running.

How does JS code work?

In the JS code execution, JS code is executed sequentially, from top to bottom, this time is synchronous, however, there are a few exceptions:

• Asynchronous network requests
• Event bindings, event listeners
• Time-triggered functions

Let's simulate the scenario where the JS engine encounters these three types of code:

1. JS execution of good, is executing code in sequence, this time, encountered the asynchronous network request code, this time, the direct JS code after the call, continue to execute after the JS code, and did not wait for the result of the network request, JS code execution is single-threaded (regardless of H5), So certainly after the asynchronous network request call, certainly not JS execution engine management, question one: Who is waiting, who after the notification JS execution engine results, after all, is the JS code on the JS engine is executed.

2. With the first question, we already know that there must be other things involved in the above things, first put, then JS has fun down execution, encountered event binding and event listener function, oh, after this JS call, but also continue to go down, and did not call those functions, we know, The event function will only work when the event is triggered, JS code js execution engine execution. So question two: who takes the event associated function to save to receive event triggering to select the correct event handler to notify the JS execution engine?

3. JS in the Encounter settimeout and setinternal functions, is also not directly executed, and then the code after processing, then the question three: who in the monitoring time elapsed to choose the appropriate trigger function to inform the JS engine execution?

The above 3 points are in their own learning JS operation mechanism and JS execution engine, encountered 3 problems, then 3 questions which JS execution JS code, but monitoring is certainly not JS execution engine, the answer is as follows:

1. Asynchronous Network Request thread
2. Event Trigger Thread
3. Timed Trigger Thread

The above 3 threads are independent of the JS engine to help deal with these 3 types of code, so ah, do not think that the JS engine do anything, plus GUI rendering thread, JS execution engine thread, 5 threads are aligned.

Above we understand the JS execution of the code and 3 additional threading assistance, JS execution code to build a complete environment, but the JS execution engine is how to execute the functions given by the 3 classes of threads, the answer is the queue (called Message queue), 3 threads Choose the function that needs to be executed, will be wrapped into a structure (message), put into the queue, JS execution playing code, will loop in the queue to take messages, take, then execute, not take the wait.

Above an execution structure, then we can draw a conclusion, JS in the encounter 3 types of code, it must lag behind the synchronization code, because the synchronization code after the completion of the execution, JS will take a message from the queue to execute, and after the completion of the execution will not take another.

This is why the time-processing function is always executed after synchronizing the code, the callback function of the asynchronous network request is also called after the synchronization code execution is completed, because the 3 class functions are placed in the queue by 3 classes of threads, and the code inside the queue after JS executes the synchronization code to execute.

SetTimeout why not just the right execution, this is because the timing trigger thread only after the time, the function should be executed to put into the queue, exactly when the execution also depends on how many messages before the queue is not processed.

Second, GUI rendering thread and JS execution engine interaction mechanism

It says that the interaction between the 3 execution threads and the JS execution engine is basically no problem, this is the interaction between the rendering and the JS code.

In the early stage of writing JS code, must have encountered JS code execution performance problems, and then the page will not move directly, this time can actually come to a conclusion, JS execution, the rendering thread is blocked, and then looked up the information, It is more accurate to find this definition: The thread of the JS execution engine and the GUI render thread are mutually exclusive.

This also can explain why JS execution time long after the problem of rendering fixed. Then a new problem comes, if so, then the rendering engine must not render, at least in the case of JS queue is not empty, there is no chance to render, then you can do a code constantly using setinternal to fill in the queue of messages. Is that really the case?

Certainly not, the actual browser is not the case, then exactly which block JS engine and GUI execution engine of the thread to switch, synchronous code certainly not, then is the queue this piece, certainly not the queue for the situation of the empty switch, because the actual JS code after the change is basically rendered, So basically OK, is executed between each message, because the JS code is synchronous at the time of execution, after making this assumption, and then check a large amount of data, an article is described, after each execution of a message, immediately switch to render thread to perform the rendering effect, Then the render completes and then toggles the JS code execution to remove a message.

Thus the interaction between rendering and JS code execution is understood. (Does the render thread need to switch every time?) This already belongs to the performance optimization content, temporarily did not understand)

Try to be clear: JS code operation mechanism