什么是JS异步编程
同步编程(Synchronous)
众所周知,js是运行在浏览器的脚本语言。它的作用就是用来完成页面的交互效果。
也是就是 JS的DOM操作。为了防止有的在对DOM执行修改操作,有的对这个DOM执行删除操作,这时候浏览器不知道该听谁的了。为了避免这种冲突,javaScript就被设计成为了单线程工作。
javaScript中只有一个执行栈,就好比有很多人买鸿星尔克,但是只有一个收银台,所以只能一个一个的付钱,这样的好处是可以让浏览器有条不紊的运行,坏处是当遇到返回时较长的时候,后面的代码会等待执行,会出现卡死现象。
异步编程(Asynchronous)
JavaScript 执行异步任务时,不需要等待响应返回, 可以继续执行其他任务,而在响应返回时,会得到通知,执行回调或事件 处理程序。这样javaScript就可以同时执行耗时较大的任务
EventLoop、消息队列
EventLoop只做一件事情,就是监听调用栈和消息队列
当调用栈中的函数执行完后,它就会从消息队列中取出第一个回调函数,重新放入到调用栈(第一轮代码已经执行完成)中执行。
当第二轮需要等待的函数执行完毕后,会进入消息队列一次等候。EventLoop会把他们再次放到调用栈中依次执行。
调用栈是浏览器正在执行的列表,而消息队列这是代办的列表。
宏任务、微任务
宏任务先执行,执行结束进入回调队列的末尾,
微任务后执行,执行结束在本轮回调队列的末尾立即执行
执行先宏后微,弹出先微后宏
目前绝大多数异步调用都是作为宏任务执行
Promise对象,MutationObserver对象,node中process.nextTick微任务
// 宏任务
setTimeout(() => {
console.log(1)
})
// 微任务
queueMicrotask(() => {
console.log(3)
})
// 同步
console.log(2)
同一层级内:
同步代码(普通代码、promise构造函数)>> 微任务(nextick > queueMicrotask、then)>> 宏任务(setTimeout)