JavaScript 微任务、宏任务

开始了解一点

宏任务（macroTask）、微任务（microTask）是异步中的一些概念，了解其有助于我们理解代码运行的细节。
其中，宏任务包括:setTimeout,setInterval,DOM事件，AJAX请求
微任务包括:Promise,async/await
重要结论：微任务 执行时机 比 宏任务 早

从小例子开始

下面的代码中，控制台打印依次打印什么数字呢？

console.log(1)

setTimeout(()=>{
	console.log(2)
})

Promise.resolve()
.then(()=>{
	console.log(3)
})

console.log(4)

答案是1 4 3 2，与结论一致。执行完同步任务后，在异步任务中，微任务的执行时机会比宏任务早。

细致的了解

重要结论：微任务先于DOM渲染，宏任务执行后与DOM渲染。

例子：

const $content = $('<p>内容</p>')
$('#box').append($content)

console.log(1)

setTimeout(()=>{
	console.log(2)
	altert('setTimeout')
})

Promise.resolve()
.then(()=>{
	console.log(3)
	Alter('Promise')
})

console.log(4)

在本例中，Promise先执行，控制台打印3，并出现提示框；此时，浏览器上并没有渲染出$content的内容，再点击提示框之后，DOM渲染执行，显示出内容，并弹出提示框Promise。

原理：Eventloop和DOM渲染

推荐阅读：对于宏任务和微任务，你知道多少？

摘选（有改动）：

js是单线程，按照顺序一行一行执行：如果某行报错则停止后续执行；先执行同步，再执行异步。
看图，代码会被一行一行放入Call Stack中执行，遇到异步，就会将其移动到Web APIs中记录下来，等待时机将其移动到Callback Queue中。
当同步代码执行完（Call Stack为空时），先会尝试DOM渲染，之后再触发Event Loop机制，Event Loop会，轮询查找Callback Queue，如果有就移动到Call Stack中执行

这里，揭示了为何异步代码会比同步代码运行的晚，但还有一个疑点，为什么在上一个例子和结论中，Promise会比DOM渲染早呢？

一句话总结：

Promise是ES6规范的，不是W3C规范的所以不经过Web APIs，此外与宏任务不同的一点是，有自己独特的micro task queue

通过这一张图，即可知道为何微任务比宏任务早，并且先于DOM渲染