首先了解JavaScript执行代码的机制: js是一个单线程的脚本语言, 执行代码的过程是一个个的去执行, 假如前面有代码没有执行完就会阻塞后面的代码执行, 由于js无法进行多线程, 那么就出现了同步任务和异步任务
- 比如: 我们去kfc里面点餐的时候, 取餐的时候会根据我们的点餐时间来进行排序, 假如前面还有三个人, 取号的时候会提示前面还有三个人在等待取餐, 会等到前面三个人的餐做好了再给我们做, 那么在等待的过程就会对我造成一个堵塞的问题, 他的餐没做好我就没法吃, 我就要继续等待, 这会浪费我的时间, 那么怎么解决这种问题呢, 我们可以在等待的时候去做别的事情, 等到我们的餐准备好了我再来取餐, 这样子的话就不影响我们的时间了, 实现了一个并行的效果, 那么这就是异步, 又比如我们打客服电话的时候显示话务繁忙, 前面还有几个人在等待, 会等到前面人的电话都拨通完之后再接听我们的电话, 一次只能为一个人服务, 按照等待的顺序依次执行, 这就是同步
了解了单线程那么接下来来了解一下什么是宏任务和微任务
宏任务和微任务:
宏任务: 宿主(Node、浏览器)发起的
微任务: JS引擎 发起的
-
宏任务有:script(整体代码)/setTimout/setInterval/setImmediate(node 独有)/requestAnimationFrame(浏览器独有)/IO/UI render(浏览器独有)等
-
微任务有:Promise.then(Promise是同步执行)、Object.observe、MutationObserver、process.nextTick(Node.js 环境)等
执行顺序:先执行同步代码,遇到异步宏任务则将异步宏任务放入宏任务队列中,遇到异步微任务则将异步微任务放入微任务队列中,当所有同步代码执行完毕后,再将异步微任务从队列中调入主线程执行,微任务执行完毕后再将异步宏任务从队列中调入主线程执行,一直循环直至所有任务执行完毕。
这里容易产生一个错误的认识:就是微任务先于宏任务执行。实际上是先执行同步任务,异步任务有宏任务和微任务两种,先将宏任务添加到宏任务队列中,将宏任务里面的微任务添加到微任务队列中。所有同步执行完之后执行异步,再将异步微任务从队列中调入主线程执行,微任务执行完毕后再将异步宏任务从队列中调入主线程执行。之后就一直循环执行完所有任务
下面开始带题讲解: