[JS] [2021-01-15 更新] 什么是微任务和宏任务，有什么区别？

[jeddygong]

任务机制

介绍宏任务微任务之前需要先了解任务执行机制。

JavaScript是单线程语言。JavaScript任 务需要排队顺序执行，如果一个任务耗时过长，后边一个任务也的等着，但是，假如我们需要浏览新闻，但新闻包含的超清图片加载很慢，总不能网页一直卡着直到图片完全出来，所以将任务设计成了两类: 同步任务和异步任务

同步和异步任务分别进入不同的执行“场所”，同步进入主线 程，异步进入Event Table并注册函数。当指定的额事情完 成时，Event Table会将这个函数移入Event Queue。主线 程内的任务执行完毕，会去Event Queue读取对应的函数，进入主线程。

上述过程会不断重复，也就是常说的EventLoop(事件循环)。

异步任务中的宏任务微任务

1.微任务(microtask)

当前(此次事件循环中)宏任务执行完，在下一个宏任务开始之前需要执行的任务，可以理解为回调事件。

宏任务中的事件放在callback queue中，由事件触发线程维护;微任务的事件放在微任务队列中，由js引擎线程维护。

• Promise

• Object.observe(已经废弃)

• MutationObserver

• process.nextTick(nodejs)

2.宏任务(macrotask)

当前调用栈中执行的代码成为宏任务

• 主代码块

• setTimeout

• setlnterval

• I/O (ajax)

• UI rendering

• setlmmediate(nodejs)

• 可以看到，事件队列中的每一个事件都是个macrotask,现在称之为宏任务队列

区别

微任务和宏任务是异步任务的两个种类。

宏任务: 当前调用栈中执行的代码成为宏任务。(主代码块、定时器等等)

微任务: 当前(此次事件循环中)宏任务执行完，在下一个宏任务开始之前需要执行的任务，可以理解为回调事件。 (promise.then, proness.next Tick等等)

宏任务中的事件放在callbackqueue中，由事件触发线程维 护;微任务的事件放在微任务队列中，由js引 擎线程维护。

在挂起任务时，JS引擎会将所有任务按照类别分到这两个队伍中，首先在macrotask的队列中取出第一个任务，执行完毕后取出microtask队列中的所有任务顺序执行;之后再取macrotask任务，周而复始，直至两个队列的任务都取完