event loop

Tasks, microtasks, queues and schedules
Difference between microtask and macrotask within an event loop context

• macrotasks: setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering
  microtasks: process.nextTick, Promises, Object.observe, MutationObserver

• In summary:

  1. Tasks execute in order, and the browser may render between them
  2. Microtasks execute in order, and are executed:
     
     • after every callback, as long as no other JavaScript is mid-execution
     • at the end of each task

• Basic concepts in spec:

  • An event loop has one or more task queues.(task queue is macrotask queue)
  • Each event loop has a microtask queue.
  • task queue = macrotask queue != microtask queue
  • a task may be pushed into macrotask queue,or microtask queue
  • when a task is pushed into a queue(micro/macro),we mean preparing work is finished,so the task can be executed now.

• And the event loop process model is as follows:
  when call stack is empty,do the steps-

  1. select the oldest task(task A) in task queues
  2. if task A is null(means task queues is empty),jump to step 6
  3. set “currently running task” to “task A”
  4. run “task A”(means run the callback function)
  5. set “currently running task” to null,remove “task A”
  6. perform microtask queue
     (a).select the oldest task(task x) in microtask queue
     (b).if task x is null(means microtask queues is empty),jump to step (g)
     (c).set “currently running task” to “task x”
     (d).run “task x”
     (e).set “currently running task” to null,remove “task x”
     (f).select next oldest task in microtask queue,jump to step(b)
     (g).finish microtask queue;
  7. jump to step 1.

• a simplified process model is as follows:

  1. run the oldest task in macrotask queue,then remove it.
  2. run all available tasks in microtask queue,then remove them.
  3. next round:run next task in macrotask queue(jump step 2)

• something to remember:

  • when a task (in macrotask queue) is running,new events may be registered.So new tasks may be created.Below are two new created tasks:
    
    • promiseA.then()’s callback is a task
      
      • promiseA is resolved/rejected: the task will be pushed into microtask queue in current round of event loop.
      • promiseA is pending: the task will be pushed into microtask queue in the future round of event loop(may be next round)
    • setTimeout(callback,n)’s callback is a task,and will be pushed into macrotask queue,even n is 0;
  • task in microtask queue will be run in the current round,while task in macrotask queue has to wait for next round of event loop.
  • we all know callback of “click”,”scroll”,”ajax”,”setTimeout”… are tasks,however we should also remember js codes as a whole in script tag is a task(a macrotask) too.

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

/*
script start
script end
promise1
promise2
setTimeout
*/

// Let's get hold of those elements
var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');

// Let's listen for attribute changes on the
// outer element
new MutationObserver(function() {
  console.log('mutate');
}).observe(outer, {
  attributes: true
});

// Here's a click listener…
function onClick() {
  console.log('click');

  setTimeout(function() {
    console.log('timeout');
  }, 0);

  Promise.resolve().then(function() {
    console.log('promise');
  });

  outer.setAttribute('data-random', Math.random());
}

// …which we'll attach to both elements
inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);

/* 手动点击inner
click
promise
mutate
click
promise
mutate
timeout
timeout
*/

inner.click();
/* 代码触发点击
click
click【stack is not empty, cannot process microtasks】
promise
mutate【don't add another mutation microtask as one is already pending】
promise
timeout
timeout
*/