【JavaScript】JS执行机制微任务和宏任务

---

一、了解JS执行机制

在学习 promise（期约） 之前，我们需要了解JS的执行机制，同步异步概念。
众所众知JavaScript是一个单线程事件循环模型。
同步（Synchronous, sync）行为对应内存中顺序执行的处理器指令，每条指令都会严格按照他们的出现顺序来执行。那么在同步任务中请求接口和计算量特别大时我们需要等待js执行非常长的时间，这对用户来说体验非常糟糕。

为了解决这个问题 JS 在 ES6之后加大了对异步（Asynchronous, async）编程的支持。异步行为类似于系统中断，当前进程外部的实体可以触发代码执行。子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。

二、 异步任务（宏任务、微任务）

1.宏任务

script(整体代码)、setTimeout、setInterval、UI交互事件、postMessage、Ajax

2.微任务

Promise.then catch finally、MutaionObserver、process.nextTick(Node.js 环境)

所有的同步任务都是在主进程执行的形成一个执行栈，主线程之外，还存在一个"任务队列"，异步任务执行队列中先执行宏任务，然后清空当次宏任务中的所有微任务，然后进行下一个tick如此形成循环。

三、实操演练

那么巩固一下我们学习的js执行机制，异步同步习题：

console.log('a')

setTimeout(function(){
    console.log('b')
}, 200)

setTimeout(function(){
    console.log('c')
}, 0)

console.log('d')

//答案：
/*
	 a
	 d
	 c
	 b
*/

进阶习题：

const p = new Promise(resolve => {
    console.log('a')
    resolve()
    console.log('b')
})

p.then(() => {
    console.log('c')
})

console.log('d')

//答案：
/*
	a
	b
	d
	c
*/

解析：

在new Promise中promise本身其实是同步执行的,只有promise的实例方法.then才是异步任务
我们从上文学习中可以知道script是一个宏任务
（1）所以在script环境中，首先会执行const p = new Promise中的同步代码
（2）打印 a 
（3）打印 b
（4）而后遇到p.then 我们知道它是一个微任务，所以它会进入微任务队列而中断执行
（5）js会继续向下执行遇到console.log('d')
（6）打印d
（7）整段script宏任务执行完毕
（8）清除微任务队列
（9）打印c

那么了解完异步任务后，下一篇文章我们详细了解一下 promise （期约）的基础、实例方法、静态方法、期约的拓展、和期约的习题演练来帮助我们理解学习promise