深入理解JavaScript中的macro-task(宏任务)与micro-task(微任务)

1.宏任务

页面中的大部分任务都是在主线程上执行的，这些任务包括了：

• 渲染事件（如解析 DOM、计算布局、绘制）；
• 用户交互事件（如鼠标点击、滚动页面、放大缩小等）；
• JavaScript 脚本执行事件；
• 网络请求完成、文件读写完成事件。

为了协调这些任务有条不紊地在主线程上执行，页面进程引入了消息队列和事件循环机制，渲染进程内部会维护多个消息队列，比如延迟执行队列和普通的消息队列。然后主线程采用一个 for 循环，不断地从这些任务队列中取出任务并执行任务。我们把这些消息队列中的任务称为宏任务。

2.微任务

基于微任务的技术有 MutationObserver、Promise 以及以 Promise 为基础开发出来的很多其他的技术。所以微任务的重要性也与日俱增，了解其底层的工作原理对于你读懂别人的代码，以及写出更高效、更具现代的代码有着决定性的作用。

3.任务处理流程

看两张图片

3.1 事件处理流程

3.2 宏任务与微任务处理流程

4.代码示例

// 以下整体代码为一个宏任务
setTimeout(function(){
		console.log(1); //注册宏任务，下次微任务执行完后执行此宏任务
	},0)
	
	new Promise(function(resolve) {
	    console.lo