What is asynchronous operation

1. Background introduction

     Synchronization means that only one task can be completed at a time . If there are multiple tasks , You have to line up , The first task is finished , Do the next task , And so on .

     Asynchrony means that each task has one or more callback functions （callback）, After the end of the previous mission , Not to perform the latter task , Instead, execute the callback function , The latter task is executed before the end of the previous task , So the execution order of the program is inconsistent with the order of the tasks 、 Asynchronous .

2. Knowledge analysis

     First js It's a single-threaded language , That is, you can only do one thing at a time . that Js How to implement asynchronous , Isn't asynchrony and single thread self contradictory ？ Actually , Single thread and asynchrony really can't be features of a language at the same time .js Chose to become a single threaded language , So it cannot be asynchronous by itself , but js The host environment of （ For example, browser ,Node） It's multi-threaded , The host environment in some way （ Event driven , I'll talk about ） bring js With asynchronous properties .

     Browser kernel is multithreaded , They work together under kernel control to keep up with each other , A browser implements at least three resident threads ：javascript Engine threads ,UI Rendering thread , Browser event trigger thread .

1.javascript Engine threads are based on event driven single thread execution ,JS The engine is waiting for the task in the task queue , And then deal with it , There is only one browser at any time JS The thread is running JS Program .
 
2.UI The rendering thread is responsible for rendering the browser interface , When the interface needs to be redrawn （Repaint） Or cause reflux due to an operation (reflow) when , The thread will execute . But we need to pay attention UI Rendering thread and JS Engines are mutually exclusive , When JS Engine execution time UI Thread will be suspended ,UI Updates will be saved in a queue medium to JS Execute immediately when the engine is idle .
 
3. Event trigger thread , When an event is triggered, the thread will add the event to the end of the queue to be processed , wait for JS Engine handling . These events can come from JavaScript The code block currently executed by the engine is as follows setTimeOut、 Other threads from the browser kernel, such as mouse click 、AJAX Asynchronous request, etc , But because of JS All these events have to be queued JS Engine processing .

3. common problem And Solution

ajax What does the browser do when sending asynchronous requests ?

1.Js Created a ajax request
2. Open another browser ajax Engine threads , perform ajax request
3. After the execution gets the response, put the callback function into the task queue .
4.Js Execute the callback function in the task queue .

 What are the common asynchronous callback functions ？

1, Click time ,
2, Timer ,
3,AJAX request .