JS 事件循环

概览

开局一张图：

异步任务

Tasks (Macrotasks)

特点：

• 当次事件循环执行队列内的一个任务
• 当次事件循环产生的新任务会在指定时机加入任务队列等待执行

场景：

• setTimeout
• setInterval
• setImmediate（nodejs）
• I/O（nodejs）

Animation callbacks

特点：

• 渲染过程(Structure-Layout-Paint)前执行
• 当次事件循环执行队列里的所有任务
• 当次事件循环产生的新任务会在下一次循环执行

场景：

• RAF

Microtasks

特点：

• 当次事件循环的结尾立即执行的任务
• 当次事件循环执行队列里的所有任务
• 当次事件循环产生的新任务会立即执行

场景：

• Promise
• Object.observe
• MutationObserver（nodejs）
• process.nextTick（nodejs）

exmaple

setTimeout(function() {
  console.log(4)
}, 0);
new Promise(function(resolve) {
  console.log(1);
  for (var i = 0; i < 10000; i++) {
    i == 9999 && resolve()
  }
  console.log(2);
}).then(function() {
  console.log(5)
});
console.log(3);

// 1\2\3\5\4