JavaScript tasks, microtasks, queues and schedules

The recent project, which involves the use of promise in JavaScript, has done a little testing and found that it is not as simple as it is, and the water is deep, so find Mr. N (my mentor) and get professional guidance. Mr. N also do not know, but Mr. N the ability to check the source of the great, within an hour to solve the problem, gave me an English reference, after reading, I feel it is necessary to write an essay, record the income.

I. Issues

What kind of output will you get if you enter the following code? If even Mr. N, who has been in this industry for 12 of years, cannot give the right words at the outset, it is difficult for many people to answer correctly. But before you look at the following, guess what: D

1Console.log (' script start ');2 3SetTimeout (function() {4 5Console.log (' SetTimeout ');6 7}, 0);8 9Promise.resolve (). Then (function() {Ten  OneConsole.log (' Promise1 '); A  -}). Then (function() { -  theConsole.log (' Promise2 '); -  - }); -  +Console.log (' script end ');

The correct order is:

Script Startscript Endpromise1promise2settimeout

Of course, due to different browser support issues, in some specific versions of the browser, settimeout will be in front of PROMISE1,PORMISE2, such as Microsoft Edge, Firefox, IOS Safari and Desktop Safari 8.0.8.

This looks like a problem with resource competition (race condition), but it's not.

Two. Why would it be in the order above

To understand why the above sequence occurs, we need to know how the event queue handles JavaScript Tasks and microtasks. If this is the first time you have encountered this problem, take a deep breath and then look down: D

Each worker thread (WEB worker) has its own event queue, each of which does not affect each other, and each thread's event queue processes the tasks of the incoming team. If there are many tasks waiting to be processed in the queue of a worker thread, then the browser is required to determine the order of execution.

At this point, the browser can give priority to tasks that are performance-sensitive (performance sensitive), such as the response to user input.

Tasks are scheduled so that browser can bring it to javascript/dom in order. In the middle of the task and task, the browser may render the update. For example, a mouse-click callback function can schedule a task, for example, SetTimeOut.

SetTimeout will schedule a task,script end for the callback function after a given time is the first task, and SetTimeout is another independent task, which is why settimeout outputs after the scrript end.

Mircrotasks are often scheduled to execute immediately after the end of the current execution script, such as a task that wants to make things asynchronous, but does not want to create a new task. The Microtasks queue is currently executing without JavaScript events and is processed at the end of each task. Any newly queued microtask will be dealt with immediately when the Microtask queue is being executed. In the above example, the callback function of promise is microtask.

Once a promise is resolved, it will add its own callback function to the Microtask queue. This ensures that even if the promise is resolved in a timely manner, its callback function is executed asynchronously. That's why PROMISE1,PROMISE2 executes behind script end. Microtask always occurs before the next task begins.

Three. Why do some browsers behave differently?

It is because of "promise as a task or microtask". There has been a lot of discussion on this, but the general consensus is to agree to promise as a microtask. I will not list the reasons, I believe that we can also think of themselves to: D

Cheers,

You had a nice day!

Lei

JavaScript tasks, microtasks, queues and schedules