Event loop、宏任务与微任务

背景

js是单线程语言，但js的宿主环境（比如浏览器，Node）是多线程的，宿主环境通过某种方式（事件驱动，下文会讲）使得js具备了异步的属性。

浏览器

js是单线程语言，浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，甚至导致页面的假死。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的。

任务队列

鉴于上面浏览器特性，任务分为 同步任务 和 异步任务
刚才说到浏览器为网络请求这样的异步任务单独开了一个线程，那么问题来了，这些异步任务完成后，主线程怎么知道呢？答案就是回调函数，整个程序是事件驱动的，每个事件都会绑定相应的回调函数，如图示：

图解:
1、同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
2、当指定的事情完成时，Event Table会将这个函数移入Event Queue。
3、主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
4、上述过程会不断重复，也就是常说的Event Loop(事件循环)。

宏任务、微任务

异步任务 的执行，是有一个优先级的顺序的，包括了 宏任务（macrotasks）
和 微任务(microtasks)

宏任务：

name	浏览器	Node
setTimeout	✅	✅
setInterval	✅	✅
setImmediate	❌	✅
requestAnimationFrame	✅	❌
I/O	✅	✅

包含 UI rendering、script中整体的代码

优先级：主代码块（script中整体的代码） > setImmediate > MessageChannel > setTimeout / setInterval

微任务：

name	浏览器	Node
Promise.then、 catch、 finally	✅	✅
MutationObserver监听DOM的变化	✅	❌
process.nextTick	❌	✅

包含Object.observe(废弃)

优先级：process.nextTick > Promise > MutationObserver

宏任务和微任务的执行顺序

先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。
如图示：

宏任务和微任务的区别在于在事件循环机制中，执行的机制不同
1、每次执行栈执行完所有的同步任务后，会在任务队列中取出异步任务，先将所有微任务执行完成后，才会执行宏任务
2、微任务会在宏任务之前执行；
3、宏任务需要多次事件循环才能执行完，微任务是一次性执行完的。

Event loop

上图中，主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种外部API，它们在"任务队列"中加入各种事件（click，load，done）。只要 栈中的代码(同步任务) 执行完毕，主线程就会去读取 “任务队列”(异步任务) ，依次执行那些事件所对应的回调函数。