浏览器事件循环-任务队列及宏任务与微任务概念介绍

JavaScript为什么是单线程的？

浏览器js的作用是操作DOM，决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

任务队列

单线程就意味着所有任务需要排队，如果因为任务cpu计算量大还好，但是I/O操作cpu是闲着的。所以js就设计成了一门异步的语言，不会做无畏的等待。任务可以分成两种，一种是同步任务，另一种是异步任务。

（1）所以同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。哪些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

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

console.log('main1');
console.log('main2');

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

宏任务与微任务

除了广义的同步任务和异步任务，JavaScript 单线程中的任务可以细分为宏任务（macrotask）和微任务(microtask)。

• macrotask: script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
• microtask：process.nextTick, Promise, Object.observe, MutationObserver。

1. 宏任务进入主线程，执行过程中会收集微任务加入微任务队列。
2. 宏任务执行完成之后，立马执行微任务中的任务。微任务执行过程中将再次收集宏任务，并加入宏任务队列。
3. 反复执行1，2步骤
   

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

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

console.log('main');

// 1. main 2. promise 3. setTimeout

高频面试题

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

Promise.resolve().then(() => {
  console.log('promise');
  Promise.resolve().then(() => {
    console.log('promise2');
  });
});

console.log('main');

每轮事件循环执行一个宏任务和所有的微任务。

setTimeout(() => {
  Promise.resolve().then(() => {
    console.log('promise');
  });
}, 0);

Promise.resolve().then(() => {
  setTimeout(() => {
  	console.log('setTimeout');
  }, 0);
});

console.log('main');

任务队列一定会保持先进先出的顺序执行。