1.JS Is it a single thread ？
Yes , up to now ,JS The language has no syntax for multithreading , Its execution engine only supports single thread , That's one JavaScript There is only one thread in the process .
2. What is the event loop ？
The event loop is that the execution thread continuously fetches tasks from the queue - Processing tasks - The process of taking tasks . Event loops are used in many scenarios , for example NIO Model , One thread is responsible for multiple socket Communication for , Saving thread resources .
3. Macro task , Micro task ？
JS There are two types of tasks in the running model ：
Macro task （macrotask）=> Click event , Timer （setTimeout, setInterval）,IO event
Micro task （microtask）=> common Promise
Accordingly, there are two task queues ： Macro task queue and micro task queue
4. There is only one execution thread , How to choose the execution order of two task queues ？
Each macro task is processed , All the tasks in the micro task queue will be processed
5. Who generated the task , Who is responsible for inserting the queue ？
Macro task ：
- When the page button is clicked , Browser threads （ Not JS The main thread ） Generate a onclick The callback task is inserted into the queue
- Code execution to setTimeout When , Browser timer task starts timing , When the time is up, insert the task into the queue
- Browser thread received http Response time , according to ajax The callback function provided generates the task to be inserted into the queue .
remarks ：setTimeout, ajax Etc. is provided by the browser Web API,JS The engine doesn't contain these things , Call these API Will inform the browser of the task information , Browser thread is responsible for task execution , Execution complete , According to the callback function provided, the task is inserted into the queue to wait for processing .
Micro task ：
- new One Promise Object time , Will Promise The operation inside the object is wrapped into a task queue , Then immediately return to （ Because inserting into the queue is done ）.
6. generator （Generator） And what are actuators , What's the use ？
A function X There may be more than one operation in , These operations require order ,A->B->C, But you don't want the main thread to be stuck all the time X On the function （ One call X The function will wait until it's finished ）. therefore A,B,C Possibly through nesting Promise To achieve （A Of then Function execution B,B Of then Function execution C）, So the problem is solved , That is, asynchronous is guaranteed （ The main thread does not get stuck in functions X On ）, It also ensures order （ function X The internal operation is orderly ）. But if the function X There are more than one such operation in , It's going to be very deep , The code will be lengthy , Looks uncomfortable . So there are generators and actuators , You can make a function X The structure is clearer . So it came out just to optimize the structure .
7.async/await What are keywords for ？
To put it simply , These two are syntax sugars of the above generator and actuator . With this , We don't have to write a function like a generator , You don't have to implement your own actuators .
8.await Do keywords block threads ？
Can't , As mentioned above, this is the syntax sugar of generators and actuators . Execute to await A() That line of code , Just to A Function to join the task queue , Save current context , The main thread jumps out of the current function X Carry on , Wait until a certain time A The function is executed , It will resume from that point and continue down . therefore await It's just a semantic block , It doesn't actually block threads , It's just about order .
9.Web Worker What is it? ？
I said before. JS It's single threaded , There is only one thread in a process . But we can start another process , In this way, there will be multithreading . The browser provides this API, Enable user code to pass new Worker Open another thread to serve users .Worker Interact with the main thread through events .Worker Thread cannot access DOM.
10.Web Worker Application scenarios of
- Use one Worker To poll the back-end interface for alarm information , If there is a change, the main thread will be informed to refresh UI（ It is ideal to use websocket, But some scenarios are introduced specifically for a small feature websocket Don't fit , Maybe the back end doesn't have time to do it ）
- There are many kinds of computing tasks on the page , The main thread is too busy , It will result in slow response , At this time, you can extract this type of task to Worker Intermediate processing
11. When will the page be created “ It is very stuck is very ”？
Because of the browser's execution model , It's to refresh the page every once in a while （ The refresh task is inserted into the queue at each fixed time ）, The refresh task is also handled by the main thread . Rendering tasks have a lower priority , It is executed before each macro task . In other words, the macro task or micro task in front of us takes too much time , The page has not been rendered again , The refresh rate of the page is not up to 60 Time / second , The naked eye is too laggy. , for instance , You're browsing the page , Pull scroll bar , Find pages that don't roll or roll very slowly .
12." Slow response " and " Carton " It's not the same thing
Slow response means that it takes a long time for an operation to succeed , But the page can still browse normally . Carton is that there is no response to how the page operates . For example, refresh the page as well , The former page shows turns , It took a long time to load successfully . The latter can't move in circles .
13." Slow response " and " Carton " How to optimize
There may be many reasons for the slow response experienced by users , There are also corresponding coping styles
- Slow back end processing => The back end is responsible for optimization （ cache , Parallel processing of task splitting ）
- Slow resource loading => Consider client resource caching ,CDN
- Client rendering is slow , For example, an organizational structure tree of tens of thousands of people => Consider incremental refresh
And the main reason for Caton is that the single task is too time-consuming , As a result, the execution frequency of rendering task cannot reach . This is the time to split big tasks , Asynchronism . For example, a function contains A and B Two operations , You can use setTimeout, Split a macro task into two . In this way, the execution order can become A-> Rendering ->B.
//todo Add some pictures , More intuitive
