小故事系列 -任务队列 微宏任务

小故事-简单理解，高效面试

故事一：

一个餐厅，所有客人在有序排队点菜，但是有些客人要等人，所以没点。厨师先做了第一轮客户的菜。菜做好了，第一轮客人吃完，服务员收拾餐桌，迎接之前等人的顾客。客人一直源源不断的来。。。

餐厅流程图：

第一波已经点菜的人 -> 吃完，收拾桌子 -> 第一波还没点菜的人 -> 吃完，收拾桌子 -> 第二波点菜的人 -> 。。。
复制代码

浏览器流程图：

执行同步任务 -> 渲染GUI -> 执行之前的异步任务 -> 渲染GUI -> 执行新一轮同步任务 -> 。。。
复制代码

故事二

接着故事一，后来，有个 vip 客户 出现了，名叫 Promise，根据餐厅的 ES6 规定，以后vip插队点菜叫“微任务”。

ES6 餐厅的流程图：

第一波已经点菜的人 -> vip插队点菜 -> 吃完，收拾桌子 -> 第一波还没点菜的人 -> vip 插队 -> 吃
完，收拾桌子 -> 第二波点菜的人 -> 。。。
复制代码

浏览器执行流程图：

执行同步任务 -> Promise回调 -> 渲染GUI -> 执行之前的异步任务 -> Promise回调 ->  渲染GUI -> 
执行新一轮同步任务 -> 。。。
复制代码

总结

1. 执行同步任务时，发现异步任务，将异步任务回调塞到下一轮的任务队列。
2. ES6 新标准引入的 promise，Promise和mutationOberver统称为微任务。
3. 执行完同步任务后，会去执行微任务，然后渲染GUI，最后处理常规异步任务
4. 常规的同步任务和异步任务都统称宏任务，Promise和mutationOberver统称为微任务。

微宏任务流程图：

宏任务 -> 微任务 -> 渲染GUI  -> 宏任务 -> 微任务 -> 渲染GUI -> 宏任务 -> 。。。
复制代码