The article is reference watermelon video “technical egg teacher” “macro task micro task” video to write

A menu

Menu: spicy fish head, braised Suckling pig’s feet, mapo no tofu, braised agaric, cold side dish, a bowl of white rice, a pot of boiled water, braised prawns, sweet and sour carp

The chef’s chant

Oh, the customers of this table are quite good at eating, both meat and vegetables, cold and hot, the food is quite delicious. Let’s start with the following categories: ready-made (synchronous tasks), hard (macro tasks) and vegetarian (micro tasks)

Ready-made: plain rice, plain water. But can’t serve white rice and boiled water first, how can there be no food, easy to be beaten, I can’t do so. Why don’t we see what we have?

Hard dishes: spicy fish head, braised Suckling pig trotter, braised prawns, sweet and sour carp

Vegetable dishes: mapo no tofu, braised fungus, salad

First, put the rice and boiled water in a pot for reserve (synchronous task), and then fry the dishes (asynchronous task). The hard dishes will take a long time, and the customers will have to wait for a long time, so the experience is not good. First, fry the cold dishes for the customers to eat (micro task), and then fry the hard dishes (macro task).

JS execution mechanism

The main thread reads events from the task queue in a continuous Loop, so the whole operation mechanism is also called an Event Loop. Event Loop is the execution mechanism of JavaScript

Synchronous and asynchronous tasks

Synchronization task: a task that is queued to be executed on the main thread can be executed only after the previous task is completed

Asynchronous tasks are executed on the main thread only when the task queue notifies the main thread that an asynchronous task is ready for execution

Macro tasks and asynchronous tasks

Macro task Micro tasks
The timer Promise (async/await)
event process.nexTick
Ajax MutationObserve
The callback function
The FS in Node can perform asynchronous I/O operations

Execution priority: SYNC>MICRO>MACRO

The chef to cook

Console. log(' white ') setTimeout(function () {console.log(' white ')}, 0) new Promise(function (resolve, Reject) {resolve(' reject ')}). Then (res => {console.log(res)}) new Promise(function (resolve, Reject) {resolve(' console ')}). Then (res => {console.log(res)}) setTimeout(function () {console.log(' console ')). Console. log(' saute ')}, 0) setTimeout(function () {console.log(' saute ')}, 0) new Promise(function (resolve, [' console '] {resolve(' braised agaric ')}). Then (res => {console.log(res)}) console.log(' boiled water ') // console result Braised Suckling pig trotter braised prawn sweet and sour carpCopy the code

First, the chef divides the menu into categories: ready-made, hard and vegetarian.

Second: put the ready-made white rice and water on the table (execute the synchronization code in the execution stack and output it in the console)

Third: clean the stove (empty the execution stack), vegetarian dishes are easier to do, and finish the vegetarian dishes first (perform micro tasks first) until the vegetarian dishes are finished (empty the micro task queue) on the table

4: When the vegetarian dishes are finished, it’s time to cook the hard dishes (execute macro tasks). Cook the hard dishes in order (execute macro task queues in turn).

5: All hard dishes are finished (clear the macro task queue), so that all the dishes listed in the menu are finished and served (end of one event loop)

That’s it. The chef’s table is done. During the break, the chef will ask the boss if there are new customers ordering. If there are new customers ordering, he will continue to cook according to the above steps (executing the event cycle again) and finish his work.

Refer to the blog

Blog.csdn.net/alokka/arti…

www.cnblogs.com/zwnsyw/p/12…