Javascript的event loop

Learning js, the event queue must be a high-frequency words appear, the main thread + event queue is one of its major features.

In the recent review of old knowledge, this concept across micro tasks, under the record here, first wrote a demo based on this type of interview:

setTimeout(function() {
  console.log('5');
});
new Promise(function(resolve) {
  console.log('1');
  // setTimeout(resolve);
  resolve()
})
  .then(function() {
    setTimeout(() => {
      console.log('6');
    });
    return '4';
  })
  .then(console.log);
process.nextTick(() => {
  console.log('3');
});
console.log('2');

　　Before Promise to write a similar class, then received direct function with a setTimeout to push into the queue function, although function is achieved, it is not realistic in the browser's performance, there are some sites simply use process.nextTick to achieve, so that the browser is no longer applicable.

　　According to the document can be found there is a micro-browser task queue is a queue before the task is triggered, can be understood as setImmediate environment under the node of such a thing, what about Promise specific asynchronous method is implemented in mdn documents say is also very clear:

　　JavaScript promises and the Mutation Observer API both use the microtask queue to run their callbacks.

　　Open the newer version of the Google browser console, enter queueMicroTask can be found in the window environment does have such a function to run asynchronously and node of process.nextTick as receiver function (except that nextTick last run in the main thread and non-asynchronous ), but ahead of the general queue of tasks to perform:

　　microtasks can enqueue new microtasks and those new microtasks will execute before the next task begins to run, and before the end of the current event loop iteration.

　　In fact, this function is somewhat similar to the task queue micro hook function requestAnimationFrame another browser bundled per frame, that is a function of the composition of the incoming queue is executed at a particular time, where you can be understood as the beginning of a whole task queue the implementation of micro-task queue.

 

　　The above code will print in the order 1,2,3,4,5,6 node environment, understanding the mechanism of micro-tasks, not difficult to understand the results.

　　Main process comprising: a synchronization code in the promise, console.log ( '2') // 1,2

　　Finally, the main process run: promise.nextTick of the parameters // 3

　　The first round micro task queue: function () {... return '4'}, console.log // Since this resolve is executed immediately, which represents the function () {... return '4'} will the first round is pushed into the event loop micro task queue, if setTimeout wrapped, will enter the second round micro task queue; Meanwhile, function () {... return '4'} wrapped inside setTImeout function of the task queue for the second round; print 4

　　The first round tasks: setTimeout included console.log ( '5') // 5

　　The second round Task: function () {... return '4'} // function has entered the second round 6

 

　　The actual writing code, asynchronous execution of these functions will not trigger delay is zero situation, such as ajax request, so understanding the event loop when used in addition to the topic and we have measures, does not seem to value any practical application.