JavaScript event loop mechanism in the browser

Event loop mechanism browser is HTML defined in the specification.

JavaScript has a main thread and call stack , all tasks will be placed in the call stack wait for the main thread.

• JS call stack

  The latter is an advanced data structures. When the function is called, will be added to the top of the stack, the function will be removed from the top of the stack after the execution is complete, until the stack is empty inside.

• Synchronization task, asynchronous tasks

  JS single-threaded tasks into synchronous and asynchronous tasks task. Synchronization task waits for the main thread to perform asynchronous tasks will be registered after the asynchronous queuing order in accordance with the outcome of the call stack callback function added to the task queue (Message Queue) wait in the main thread idle time, that is, within the stack It is emptied when the stack is read to wait for the main thread. Task queue is a FIFO data structure.

• Event loop mechanism

  Call stack synchronization tasks were completed, are cleared within the stack, on behalf of the main thread is idle, and this time it will go to the task queue in order to read a task put into execution stack. Each time it is emptied within the stack, will not have to read the task queue task, you have to read execution cycle has been read - operations performed on the formation of the event loop .

• Timer

  Timer will turn on a timer to trigger the thread to trigger the timer , the timer will wait for the time after a specified event into a task queue wait for the main thread. Timer specified number of milliseconds delay does not really accurate, since the timer only to the specified time events into the task queue, after the synchronization of tasks and existing tasks in the queue of events all have to wait until the completion of the implementation, read timer event will go to the main thread of execution, in the middle there may be a relatively long time-consuming task, it is impossible to ensure the implementation of the specified time.

• Macro tasks, micro-tasks

  In addition to generalized synchronous and asynchronous tasks task, JavaScript single-threaded tasks can be broken down into micro and macro tasks task.

  • Macrotask: Script (whole codes), the setTimeout , the setInterval, setImmediate, the I / O, the UI Rendering

  • 微任务：process.nextTick，Promises，Object.observe，MutationObserver

  Added: In node environment, process.nextTick higher priority than Promise, that is simply understood as: will first perform nextTickQueue part of the micro-tasks in the queue at the end of the macro task, then part of the Promise will perform micro tasks .

  The first event loop, JavaScript engine will script the code as a whole macro task execution, after the execution is complete, then detect the presence of micro-task in the current cycle, it exists in order to read it from executing the task queue micro-task All micro tasks, then read macrotask task in the task execution queue, then perform all tasks of the micro, and so on. JS execution order is each event loop macro task - micro task .

  console.log(1);
  setTimeout(function() {
      console.log(2);
  })
  var promise = new Promise(function(resolve, reject) {
      console.log(3);
      resolve();
  })
  promise.then(function() {
      console.log(4);
  })
  console.log(5);

• The example above, the first event cycle, whole sections of the code as a macro task into the main thread.

• Met setTimeout, it will wait until after the callback function after a specified amount of time put into the task of macro task queue.

• Encounter Promise, will then function into micro-tasks to the task queue.

• After the entire event cycle is complete, whether there is a task queue task to detect micro-task, there is executed.

• The first print cycle result is: 1,3,5,4.  Macro task - the task of micro

• Then the macro task and then the task queue out a macro tasks in order to get the main thread execution stack, then the macro task in this cycle is that setTimeout registered callback function, after executing the callback function, found in the circulation It does not exist in micro-tasks, ready for the next event loop.

• Detected macro task queue has no tasks to be performed, then the end of the event loop.

• The end result is 1,3,5,4,2.

 

Thank you summarize big brother, this is the interception of the street and the cool little sad article, please refer to the original link below

https://www.cnblogs.com/yqx0605xi/p/9267827.html