首先需要了解同步和异步的概念以及区别:
同步
指的是当一个进程在执行某个请求时,如果这个请求需要等待一段时间才能返回,那么这个进程会一直等待下去,直到消息返回为止再继续向下执行。
异步
指的是当一个进程在执行某个请求时,如果这个请求需要等待一段时间才能返回,这个时候进程会继续往下执行,不会阻塞等待消息的返回,当消息返回时系统再通知进程进行处理。
而众所周知 js 是单线程运行,因此在代码执行时,会将不同函数的执行上下文压入执行栈中来保证代码能够有序执行。
在执行同步代码时,如果遇到异步事件,js 引擎并不会等待其返回结果,而是会将当前异步事件挂起,继续执行执行栈中的其他任务。
当异步事件执行完毕后,再将异步事件对应的回调函数加入到任务队列中等待执行。
而任务队列
可以分为宏任务
队列和微任务
队列,当前执行栈中的同步事件执行完毕后,js 引擎首先会判断微任务队列中是否有微任务可执行,如果有就将微任务队首的事件压入栈中执行。当微任务队列中的任务都执行完成后再去执行宏任务队列中队首任务。
记得在每一次宏任务队列队首事件执行完成后都会清空一次微任务队列。
由上图中可知Task Queue则为宏任务队列,Microtask Queue为微任务队列。
微任务
包括: promise 的回调、node 中的 process.nextTick 、对 Dom 变化监听的 MutationObserver。
宏任务
包括: script 脚本的执行、setTimeout ,setInterval ,setImmediate 一类的定时事件,如 I/O 操作、UI 渲染等。