浅谈EventLoop事件轮询

什么是事件轮询（也叫事件循环）

        正常情况下，单线程机制的执行逻辑是将队列中的任务依次执行，前一个任务未完成，后面一个任务不会开始，如下图中的任务执行顺序只可能是1,2,3,4,5,6,7,8

        然而在开发过程中，我们可能会想要使用一些异步任务或者说想要设置一些任务在某些条件下执行而又不影响后面的任务。例如想要上图的任务2是一个延时函数，在3秒延时后执行依次输出，那么在没有事件轮询的情况下，在任务1完成后任务2开始，在任务2的延时输出前后面的任务都不会执行，也就会造成资源浪费。

        而我们希望的的是任务2中的延时输出不要影响后面的任务执行时间，单线程机制中又无法额外开辟一个进程，那这时就需要事件轮询。

事件轮询机制

        在事件轮询机制中，共有三个区域：执行栈（也叫回调栈）、宏任务队列、微任务队列，以及一个负责调配的Web

        * 当运行一段代码时，会先将所有代码放到执行栈中逐行分析

                * 如果这行代码是同步代码，则执行

                * 如果这行代码是异步代码，则交给Web调配

                        * Web发现这是个微任务，则加入到微任务队列

                        * Web发现这是个宏任务，则加入到宏任务队列

        * 当执行栈中的代码全部处理完成后，清空执行栈

        * 执行栈为空，则将微任务列表中的第一个任务取出放到执行栈中，重复以上过程直到微任务队列为空

        * 执行栈为空，且微任务队列为空，则将宏任务队列中第一个任务取出放到执行栈中，重复以上过程直到宏任务队列为空

        注意：在执行宏任务队列中的任务时，可能会再次产生一个微任务使得原本为空的微任务队列再次加入一个任务，这时同样是先执行执行栈中的任务，再执行微任务列表中的任务，微任务清空后再取出宏任务队列中的下一个任务

        简单地说就是执行栈不为空则执行执行栈中的任务，为空则取出微任务队列中的任务，执行栈和微任务队列都为空再取出宏任务中的任务。

事件轮询的副作用

        事件轮询机制虽然可以极大降低某个异步操作对后续任务的影响，但也导致了异步任务本身会做出一些让步，比如以下代码：

btn.onclick = function(){
    setTimeout(()=>{
        console.log("***********");
    },100);
    for(let i = 0; i<100000; i++){
        console.log(i)
    }
}

        由于setTimeout为异步任务，for循环为同步任务，故会先执行for循环中的代码逻辑，for循环全部执行完后再执行定时任务，而导致原本定时100毫秒的输出可能要几秒才能执行