【知识图谱】【JS基础】-- 事件循环

背景：JavaScript是单线程语言，所有任务都要进入到主线程中进行执行。

一、任务队列

    1. 所有任务分为同步和异步任务。同步任务是立即执行的任务，会进入到主线程中；异步任务通过任务队列(Event Queue)的形式进行协调。

    2. 主线程执行完，会读取任务队列的异步任务并执行，这称为事件循环(EventLoop)。

    3. 每进行一次事件循环称为tick。

    4. 任务分为宏任务(Macro)、微任务(Micro)，每个宏任务执行完毕后，都要清空所有的微任务。

    5. 实例：

    (macro)task 主要包含：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)、渲染事件、请求

    microtask主要包含：Promise、MutaionObserver(监听DOM)、process.nextTick(Node.js 环境)、proxy

    6. 总结：同步队列、异步队列(宏任务、微任务) => 同步队列执行完，会读取异步队列（在执行下一个宏任务之前会执行清空微任务列表）

                      微任务队列是在执行宏任务执行过程中产生的。

    7. 易错点：

        只有Promis.resolve()才叫加入了微任务中，分清同步队列、异步队列，异步队列又分清微任务和宏任务。

        await 默认返回一个Promise对象，所有后面的代码都会被装到promise.then的回调函数里。[易错点]

二、经典题：

async function async1 ()  {
    console.log('async1 start');
    await  async2();
    console.log('async1 end')// 这里是易错点！！！
}

async function  async2 ()  {
    console.log('async2')
}

console.log('script start');

setTimeout(function ()  {
    console.log('setTimeout')
},  0);

async1();

new Promise(function (resolve)  {
    console.log('promise1');
    resolve()
}).then(function ()  {
    console.log('promise2')
});

console.log('script end')