简单整理JavaScript的Event Loop

一、基本概念

• 1. 进程和线程
• 2. 异步和同步
• 3. 阻塞和非阻塞
• 4. 堆和栈
• 5. 微任务，宏任务

二、一个栗子简单理解 阻塞和非阻塞，异步和同步

简单来说一个完整的事件由事件源（调用者）、事件目标（被调用者）、事件处理程序（事件回调函数）三部分组成。 阻塞和非阻塞表现在调用者的状态；异步和同步由被调用者的反馈决定。

简单由一个小故事说明下：我给一个女孩打电话表白，电话打通了，我说我喜欢你，会出现以下几种情况：

• 1. 女孩沉默不语，也没挂断电话，这叫同步；我在这干等着这叫阻塞。整个过程就叫同步阻塞；
• 2. 女孩沉默不语，也没挂掉电话；我拿起另一个电话给另一个女孩继续表白，这叫非阻塞。整个过程叫做同步非阻塞；
• 3. 女孩回复说想想，让我等回复，然后挂了电话，这叫异步；我在这干等着。整个过程叫异步阻塞；
• 4. 女孩回复说想想，让我等回复，然后挂掉电话；我拿起电话给另一个女孩继续表白。整个过程叫异步非阻塞。

NodeJs的事件机制使用的是异步非阻塞。

三、Javascript是单线程的

JavaScript单线程主要为了避免多线程同时操作相同DOM时出现的冲突。比如一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，浏览器如何选择呢？

四、任务队列

单线程意味着，所有任务都要排队，前一个任务结束后才能往下执行。如果碰到i/o操作，比如读取文件，ajax等，过程会很慢，等待的事件也会很长，造成阻塞。 实际上Javascript主线程是不管这种i/o操作的，现将i/o操作任务挂起处于等待的任务，等i/o触发并返回结果后，再回头将挂起的任务继续执行

所有的任务都分为同步任务和异步任务 1、形成执行栈：所有同步任务都在主程序上执行，形成一个执行栈。 2、形成任务队列：主线程之外还存在一个任务队列”异步任务有了运行结果会在任务队列中放置一个事件 3、执行栈中的同步任务执行完毕，系统就会读取任务队列，看看有哪些事件。那些对应等异步任务，于是结束等待状态，进入执行栈，才开始执行。 4、主程序不断重复上面的三步

五、浏览器的事件环机制

1. 所有同步任务都在主线程上执行，形成一个执行栈
2. 主线程之外，会有一个线程池执行异步任务，还存在一个任务队列。只要异步任务有了运行结果，就在任务队列之中放置一个事件。
3. 一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列,将队列中的事件放到执行栈中依次执行，执行异步任务时，先清空微任务，再清空宏任务
4. 主线程从任务队列中读取事件，这个过程是循环不断的

六、node的事件环机制

1. node启动时，从主程序执行栈进入时间队列之前（宏任务）会先把微任务清空；
2. node中的event loop分为6个阶段，不同于浏览器的是，这里每一个阶段都对应一个事件队列，node会在当前阶段中的全部任务执行完，清空NextTick Queue（nextTick先于其他微任务），清空微任务Microtask Queue，再执行下一阶段。
3. 如果执行过程中会碰到io操作，如果有io操作会接着会进入 check阶段 如果没有check会一直返回事件队列，形成循环，直到check函数出现；有 check会往下执行 形成事件环
4. 微任务会在每次执行队列切换的时候执行