JS执行机制 宏任务微任务
前言
这篇文章主要介绍JS的执行机制以及宏任务与微任务
一、JS的执行机制
文字解释
js代码在执行后会把任务分类为同步任务和异步任务 JS优先执行同步
主线程执行栈会优先执行同步任务 异步任务会被放入一个特殊的处理程序中 满足条件会被放入任务队列等待
直到同步任务都被执行完 就会去队列找优先满足条件的异步任务 放入主线程执行
常见异步
事件 定时器 Ajax请求 文件操作
二、宏任务与微任务
宏任务: 一个文件里可以会有多个宏任务,
- 首先一整个js代码块为第一个宏任务
-
setTimeout
-
setInterval
-
Ajax
-
事件
微任务: 宏任务中的一个部分,它的执行时机是在同步代码执行之后,下一个宏任务执行之前。总结起来,微任务有:
- Promise.then
- Promise async/await
- process.nextTick(Node.js 环境)
宏任务和微任务执行机制
JS优先执行同步任务,然后执行微任务,最后执行宏任务。
总结:执行完第一个宏任务,准备执行第二个宏任务的时候要看看微任务队列中有没有可执行的微任务,如果有,优先将微任务执行完成
三、代码演示
setTimeout(() => { //宏任务 console.log('1')}, 0)console.log('2'); //同步任务new Promise((resolve) => { console.log('3'); //同步任务 resolve()}).then(() => { console.log('4'); //微任务}).then(()=>{ console.log('5') //微任务})console.log('6') //同步任务// 2 3 6 4 5 1
分析:
setTimeout()是宏任务,被放入一个特殊的处理程序中 满足条件会被放入任务队列等待. 所以先打印同步任务 2 和 3 , then是微任务,是在同步代码执行之后,下一个宏任务执行之前,此时第一个宏任务还有同步任务未执行完毕(一整个js代码块为第一个宏任务). 所以会先打印 6 ,再执行微任务. 最后执行第二个宏任务