彻底搞懂EventLoop

为什么需要EventLoop

javascript 是单线程的，单线程就意味着，所有的任务需要排队，前一个任务结束才会去执行后一个任务。前一个任务如果耗时很长，后一个任务就不得不等着。为了协调事件（event），用户交互（user interaction），脚本（script），渲染（rendering），网络（networking），用户代理（user agent）必须使用事件循环（eventLoop）。

Event Loop即事件循环，是指浏览器或Node的一种解决javascript单线程运行时不会阻塞的一种机制，也就是我们经常使用的异步原理。

预备知识

javascript 运行机制：

1. 所有的同步任务都在主线程上执行，形成一个执行栈
2. 主线程之外，还存在任务队列（task queue）。只要是异步任务有了结果会在任务队列中放置一个事件
3. 一旦执行栈中的所有同步执行任务执行完毕，就回去看任务队列，看看有那些事件，那些对应的是异步任务，于是结束等待状态，进入执行栈，开始执行
4. 主线程不断重复上面三步
   概括：调用栈中的同步任务执行完毕之后，栈内清空，这个时候就去执行队列中按照顺序读取一个任务放到栈中执行。每次栈内清空，就会去读取任务队列中有没有任务，有就读取执行，一直读取-执行

堆、栈、队列

堆（Heap）

堆是一种数据结构，是利用完全二叉树维护的一组数据，堆分为两种，一种为最大堆（根节点最大），一种是最小堆（根节点最小）
堆是一种现行数据结构，相当于一维数组，有唯一后继

栈（Stack）

栈在计算机科学中是限定仅在表尾进行插入或删除操作的线性表。
栈是一种数据结构，按照先入后出的原则储存数据
栈只能在某一端插入和删除的特殊线性表

队列 （Queue）

特殊之处在于它只允许在表的前端（front）进行删除操作，而在表的后端（rear）进行插入操作，和栈一样，队列是一种受限制的线性表
插入在队尾，删除在队头，故而先进先出

Event Loop

在javascript中，异步任务被分为两种，一种宏任务（MacroTask）也叫Task，一种叫微任务（MicroTask）

MacroTask（宏任务）

script全部代码，setTimeout，setInterval，setImmediate（浏览器暂不支持，只有IE10支持），I/O，UI Rendering

MicroTack （微任务）

Process.nextTick,(Node 独有)， Promise

浏览器中的EventLoop

javascript 有一个 main thread 主线程 和 call-stack 调用栈（执行栈），所有的任务都会被放到调用栈中等待主线程执行

JS 调用栈
JS调用栈采用的是后进先出的规则
javascript单线程任务被分为同步任务和异步任务

执行栈在处理同步任务后，查看执行栈是否为空，如果执行栈为空，就会去执行Task（宏任务）， 每次宏任务执行完毕后，检查微任务队列是否为空，如果不为空的话按照先入先出的规则全部执行完微任务，设置微任务队列为null，然后再去执行宏任务，如此循环。