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

发布于:2023-01-15 ⋅ 阅读:(794) ⋅ 点赞:(0)


一、了解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