JS asynchronous mechanism

One 、 Synchronous and asynchronous

1. Sync

If when the function returns , The caller can get the expected result （ That is to get the expected return value or see the expected effect ）, So this function is synchronous .

2. asynchronous

If when the function returns , The caller hasn't been able to get the expected result , It needs to be obtained by certain means in the future , So this function is asynchronous .

Two 、 Single thread and multi thread

javascript It's a single thread operation , Who are the time-consuming operations entrusted to ？

javascript It's actually a language , Whether it is single thread or multi-threaded should be combined with the specific running environment .javascript Is usually run in a browser , Specific reasons JS Engine parsing and running .

1、 browser

The popular browsers at present are ：Chrome、FireFox、IE、Opera、Safari. Browser kernel is multithreaded .

A browser usually has several resident threads ：

• Rendering engine threads ： seeing the name of a thing one thinks of its function , This thread is responsible for rendering the page
• JS Engine threads ： be responsible for JS Analysis and execution of
• Timing trigger thread ： Handle timing events , such as setTimeout、setInterval
• Event trigger thread ： Handle DOM event
• asynchronous http Request thread ： Handle http request

It should be noted that , Rendering threads and JS Engine threads cannot run at the same time . When the rendering thread is executing the task ,JS Engine threads will be suspended . because JS Can operate DOM, If in rendering JS Processed DOM, The browser may be at a loss .

2. JS engine

Usually when it comes to browsers , We'll talk about two engines ： Rendering engine and JS engine . The rendering engine is how to render pages ,Chrome、Safari、Opera It's using Webkit engine ,IE It's using Trident engine ,FireFox It's using Gecko engine . Different engines have different implementation effects on the same style , This leads to the browser compatibility problem which is often criticized .

JS The engine can be said to be JS virtual machine , be responsible for JS Code parsing and execution . It usually includes the previous steps ：

• Lexical analysis ： Decompose the source code into meaningful participles
• Syntax analysis ： Parse the idiom tree with a parser
• Code generation ： The code that the sound field machine can run
• Code execution

Different browsers JS The engines are different ,Chrome It's using V8,FireFox It's using SpiderMonkey,Safari It's using JavaScriptCore,IE It's using Chakra.

Reason why JavaScript A single thread , It's because the browser only has one open at runtime JS Engine threads to parse and execute JS. Then why is there only one engine ？ If there are two threads to operate at the same time DOM, Is the browser at a loss again .

therefore , although JavaScript It's single threaded , But the browser is not single threaded . some I/O operation 、 Timer timing and event monitoring （click,keydown） And so on are done by other threads provided by the browser .

3、 ... and 、 Message queues and event loops

Through the above understanding , We can know that in fact JavaScript through JS The engine thread interacts and cooperates with other threads in the browser to achieve asynchrony . But when does the callback function add to JS Execution in engine thread ？ What is the order of execution ？

The explanation of all this continues with a continued understanding of message queues and event loops .

Once an asynchronous task has a response, it is pushed into the queue . Such as the user's click event 、 The browser receives a response from the service and setTimeout Events to be executed in , Each asynchrony is associated with a callback function .

JS Engine threads are used to perform synchronization tasks in the stack , When all synchronization tasks are completed , Stack cleared , Then read a pending task in the message queue , And push the relevant callback function into the stack , A single thread starts to perform a new synchronization task .

JS The engine thread reads tasks from the message queue in a continuous loop , Every time the stack is emptied , Will read new tasks in the message queue , If there is no new task , Will wait , Until there's a new mission , This is called the event cycle .

After the asynchronous task is initiated , from AJAx Threads perform time-consuming asynchronous operations , and JS The engine thread continues to perform other synchronization tasks in the heap , Until all asynchronous tasks in the heap have been executed . then , Take messages out of the message queue in order as a synchronization task JS Execution in engine thread , that AJAX The callback function will be executed at a certain moment .

Four 、 example

setTimeout(function(){
    for(var i = 0; i < 100000000; i++){}
    console.log('timer a');
}, 0)
 
for(var j = 0; j < 5; j++){
    console.log(j);
}
 
setTimeout(function(){
    console.log('timer b');
}, 0)
 
function waitFiveSeconds(){
    var now = (new Date()).getTime();
    while(((new Date()).getTime() - now) < 5000){}
    console.log('finished waiting');
}
 
document.addEventListener('click', function(){
    console.log('click');
})
 
console.log('click begin');
waitFiveSeconds();