Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to understand the synchronous and asynchronous programming of JS and the underlying mechanism of EventLoop". The content of the article is simple and clear, and it is easy to learn and understand. please follow the editor's train of thought to study and learn "how to understand the synchronous and asynchronous programming of JS and the underlying mechanism of EventLoop".

1. JS is single-threaded, how to achieve asynchronous programming:

1) JS is single-threaded, and most of the code is synchronous programming.

2) the multi-thread mechanism of browser is used in JS, and the asynchronous effect is realized based on single-thread EventLoop (event loop mechanism).

2. Event loop (micro task and macro task):

1) microtask: high priority and you can jump the queue instead of defining it first and executing it first. Including: promise.then,async/await [generator], requestAnimationFrame,observer,MutationObserver,setImmediate.

2) Macro task (macrotask): the priority is low, and the one defined first is executed first. Including: ajax,setTimeout,setInterval, event binding, postMessage,MessageChannel (for message communication).

3. Reorganize the process according to the event cycle mechanism:

+ first find the micro-task queue, if there is in the micro-task queue, first from the micro-task queue, generally according to the storage order to obtain and execute.

+ if it is not in the micro task queue, then go to the macro task queue to look for it. In the macro task queue, you usually take out the one who arrives for execution first according to the condition that you arrive first for execution.

Regular interview questions: EventLoop event cycle

? Interview question 1:

Console.log ('1') / / 1 async function async1 () {console.log ('2') / / 2 await setTimeout (() = > {console.log ('3') / / 8}, 0) console.log ('4') / / 5} setTimeout (() = > {console.log ('5') / / 7} 0) async1 () new Promise (function (resolve) {console.log (6') / / 3 resolve ()}) .then (function () {console.log (7') / / 6}) console.log ('8') / / 4 / / result: 1 2 6 8 4 7 5 3

? Interview question 2:

Async function async1 () {console.log ('async1 start'); / / 2 await async2 (); console.log (' async1 end'); / / 6} async function async2 () {console.log ('async2'); / / 3} console.log (' script start'); / / 1 setTimeout (function () {console.log ('setTimeout'); / / 8}, 0) async1 () New Promise (function (resolve) {console.log ('promise1'); / / 4 resolve ();}). Then (function () {console.log (' promise2'); / / 7}); console.log ('script end'); / / 5 / / result: script start async1 start async2 promise1 script end async1 end promise2 setTimeout

? Interview question 3:

Console.log (1); / / 1 setTimeout () = > {console.log (2); / / 6 Promise.resolve (). Then (data = > {console.log (3); / / 7});}); new Promise ((resolve) = > {resolve () console.log (4) / / 2}). Then () = > {console.log (5); / / 4 setTimeout () = > {console.log (6); / / 8}) Then (() = > console.log (7)) / / 5 console.log (8); / / 3 / / result: 1, 4, 8, 5, 7, 2, 3, 6 1, 4, 8 is synchronization 5, 7 is micro task 2 macro task 3 micro task 6 macro task process / thread

* Core answer | basic knowledge should be consolidated

1) A process represents a program (a browser opens a page card (Tab page) is a process)

2) Thread is used to deal with specific things in the process. If a program needs to do a lot of things at the same time, it needs to open up many threads.

3) A thread can only do one thing at a time

An official statement

1) A process is the smallest unit of cpu resource allocation (the smallest unit that can own resources and run independently).

2) Thread is the smallest unit of cpu scheduling (a thread is a running unit of a program based on a process, and there can be multiple threads in a process).

Browsers are multithreaded

* Core answer | basic knowledge should be consolidated

1) the browser is multi-process

2) the browser can run because the system allocates resources (cpu, memory) to its process.

3) to put it simply, every time you open a Tab page, you create a separate browser process.

So let's take a look at which threads it contains (list some major resident threads)

GUI rendering thread

1) responsible for rendering browser interface, parsing HTML,CSS, building DOM tree and RenderObject tree, layout and drawing, etc.

2) the thread executes when the interface needs to be redrawn (Repaint) or reflow is triggered by some operation.

3) Note that the GUI rendering thread and the JS engine thread are mutually exclusive. When the JS engine executes, the GUI thread will be suspended (equivalent to being frozen), and the GUI update will be saved in a queue until the JS engine is idle.

JS engine thread

Also known as the JS kernel, it is responsible for handling Javascript scripts. (for example, V8 engine)

1) the JS engine thread is responsible for parsing Javascript scripts and running code.

2) the JS engine has been waiting for the arrival of the task in the task queue, and then dealing with it. There is only one JS thread running the JS program in a Tab page (renderer process) at any time.

3) also note that the GUI rendering thread and the JS engine thread are mutually exclusive, so if the JS execution time is too long, it will cause the rendering of the page to be incoherent and cause the page rendering load to block.

Single Thread Asynchronous programming in JS

* Core answer | basic knowledge should be consolidated

JS is single-threaded: the browser allocates only one thread to render JS code.

1. Most of the code in JS is "synchronous programming": the above task is not completed, and the following task cannot be handled.

2. However, the effect of "asynchronous programming" can be planned by using the multithreading mechanism of the browser in JS.

Timer

Ajax/Fetch/ cross-domain (HTTP network request)

Event binding

There is also asynchronous programming in Promise.

Generator / yield

Async / await

Calculate the execution time of the program (estimate)

1) run and monitor console.time/timeEnd (affected by the current computer operating environment)

2) large O representation (estimated in advance)

Console.time ('AAA'); for (let I = 0; I

< 99999999; i++) {} console.timeEnd('AAA'); 真实项目中应该避免死循环 (重要) while (true) {} console.log('OK'); // 不执行：上述的死循环一直占用这"JS渲染线程"，线程空闲不下来，就处理不了其他的事情定时器的异步编程 1)设置定时器任务是同步的 2)"间隔interval这么长时间，执行定时器绑定的函数" 这个任务是异步的 3)遇到异步任务，浏览器不会等待它执行完，则继续渲染下面的代码;当等到下面代码运行完，时间也到达了执行的条件，才会把异步任务执行; setTimeout(() =>

{console.log ("OK"); / / 2}, 1000); console.log ('NO'); / / 1

Interval is set to zero and does not execute immediately, but browsers all have "fastest reaction time (Google: 5~6ms IE:13~17ms)", which is set to zero, and you need to wait until around 5~6ms at the earliest.

SetTimeout (() = > {console.log ('OK'); / / 2}, 0); console.log (' NO'); / / 1? Asynchronous programming example 1: setTimeout (() = > {console.log (1);}, 20); console.log (2); setTimeout () = > {console.log (3);}, 10); console.log (4); console.time ('AA'); for (let I = 0; I)

< 90000000; i++) { // do soming } console.timeEnd('AA'); //=>

AA: 79ms around console.log (5); setTimeout () = > {console.log (6);}, 8); console.log (7); setTimeout (()) = > {console.log (8);}, 15); console.log (9); / / results: 2, 4, 7, 9, 7, 9, 3, 3, 1, 6, 8

Drawing analysis: (there are pictures and truths)

Execution order: synchronization tasks-> micro tasks-> macro tasks (micro tasks and macro tasks in EventQueue)

Detail node

When the "synchronization task" or other tasks in the stack are not finished, the JS rendering thread will not be idle, and sometimes the timer will not execute even if the timer has reached the specified time. "JS is single-threaded and can only do one thing at a time." the waiting time set by the timer is the fastest time to trigger execution. In many cases, it may not be executed when the time comes, but only when the JS rendering thread is idle.

Thank you for reading, the above is the content of "how to understand the synchronous and asynchronous programming of JS and the underlying mechanism of EventLoop". After the study of this article, I believe you have a deeper understanding of how to understand the synchronous and asynchronous programming of JS and the underlying mechanism of EventLoop. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.