同步任务: 同步任务是指在主线程上排队执行的任务,只有前一个任务执行完毕,才能继续执行下一个任务,当我们打开网站时,网站的渲染过程,比如元素的渲染,其实就是一个同步任务。
异步任务:异步任务是指不进入主线程,而进入任务队列的任务,只有任务队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程,当我们打开网站时,像图片的加载,音乐的加载,其实就是一个异步任务
js是一门单线程语言,所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。如果一个任务耗时过长,那么后面的任务就必须一直等待下去,会拖延整个程序,常见浏览器无反应,可能就是一段代码死循环,造成程序卡住在这个位置,无法继续。
为了解决这个问题,js的执行模式分为两种:同步和异步。
js的异步和多线程的实现是通过event loop
来实现的
event loop开始时会从全局代码开始一行一行执行,函数调用会被压入调用栈中,被压入的函数叫做帧
当函数返回后会从调用栈中退出
比如这段代码,执行时先把func2压入调用栈中执行里面的代码
遇到console.log(2)把它压入栈中并执行输出2
然后console.log(2)弹出
然后func(1)被压入栈中并执行里面的代码
console.log(1)被压入栈执行并输出1
然后弹出
然后func1执行完毕弹出
然后console.log(3)被压入栈中执行并弹出
这时整个调用栈被清空
现在加入异步操作,setTimeout执行时压入到栈中,console.log(2)进入消息队列,会在调用栈清空的时候执行
然后func1压入栈中执行代码,console.log(1)压入栈中执行后弹出,func1弹出,
然后console.log(3)被压入栈中执行并弹出
这时调用栈为空,消息队列中的消息会被压入栈中执行
使用promise和async await创建的异步操作会被加入到微任务队列中,它会在调用栈清空的时候立即执行,并且处理期间加入的微任务也会一起执行
例如下面这段代码,new Promise会首先被压入调用栈中
然后里面的代码被压入栈中并执行,然后弹出
之后的步骤跟前面举例一样,我们直接跳到这里来看一看
之后p的回调函数会进入微任务队列
此时调用栈为空
然后执行微任务队列中的console.log(resolved)和console.log(6)
最后执行消息队列中的console.log(2),清空调用栈
宏任务:
# | 浏览器 | Node |
---|---|---|
I/O | ✅ | ✅ |
setTimeout | ✅ | ✅ |
setInterval | ✅ | ✅ |
setImmediate | ❌ | ✅ |
requestAnimationFrame | ✅ | ❌ |
微任务:
# | 浏览器 | Node |
---|---|---|
process.nextTick | ❌ | ✅ |
MutationObserver | ✅ | ❌ |
Promise.then catch finally | ✅ | ✅ |