宏任务和微任务

1. 什么是同/异步任务

        同步任务：又叫非耗时任务，在程序运行的过程中，在主线程排队执行的任务。

        异步任务：又叫耗时任务，由JavaScript的宿主环境进行执行，异步任务执行完之后通知

        JavaScript的主线程执行异步任务的回调。异步任务又包含宏任务和微任务

2. 什么是宏/微任务

        宏任务：每次代码执行栈里面的代码就是宏任务，如：setTimeout，Dom事件，ajax等等。

        微任务：每次代码执行结束后立即执行的任务就是微任务，如：promise async/await 

        注意：微任务的执行时机比宏任务要早

3.案例一

               

        输出结果：100 300 400 500 200

案例分析

        我们都知道JavaScript执行是由上到下，从左往右开始执行，根据这点再加上宏/微任务进行分析。

一、当代码执行到一行时，因为是同步主线程任务优先打印

二、运行到第二行发现 setTimeout 是异步宏任务，先将他入栈，继续向下执行

三、执行到第三和第四行时 new Promise 和 async/await 是异步微任务，综上所述微比宏早，开始打印

四、运行到第五行也是同步主线程任务，进行打印

五、此时程序发现微任务已经执行完，查看栈里是否有宏任务，发现 setTimeout 还未执行，开始执行进行打印

六、执行完宏任务，跳出查看是否还有其他任务，有就执行，没有就结束程序。

4. 案例二 

                        

        输出结果：4 1 3 2 6 8 7 5

案例分析

1. 程序执行到 async1 时发现是异步微任务，但是！！！他并没有发生调用！
2. 继续执行 async2 发现 async2是在 async1里进行调用，async1没有执行async2也不会执行
3. 执行到 log(4)，发现是同步主线程任务，进行打印，继续向下执行
4. 执行到 setTimeout 是异步宏任务，程序会将他扔到栈里，先不执行，继续向下执行
5. 这里发现 async1 发生了调用，那就执行吧！同时 async2 也被调用打印，继续执行
6. 执行到 new Promise 是异步微任务执行打印，但是发现后面有then回调函数，此时回调函数还未返回，继续执行
7. 执行到最后因为是同步主线程任务，进行打印，此时then回调函数返回了，进行回调打印，程序发现已经执行到最后检查栈里是否有未完成的任务，有就执行没有就结束