JavaScript 运行机制:Event Loop,堆、栈、队列以及宏任务、微任务

1、首先，由于Javascript是单线程这个本质才会有接下来的一系列下文。

2、堆、栈、队列：

      堆：堆是在程序运行时，而不是在程序编译时，动态申请某个大小的内存空间，即动态分配内存。

      栈：简言之：‘使用堆的一种方法’（先进后出）。

      队列：是一种先进先出的线性数据结构。

区别：

•     空间分配： 堆：一般由程序员释放，如果程序员不释放就会在结束时由OS回收；栈：一般由操作系统自动分配释放；
•     缓存方式： 堆：存放在二级缓存中，生命周期一般是由虚拟机的垃圾回收算法决定的；栈：存放在一级缓存中，被调用时处于存储空间，调用完立即释放。
•     操作数据：堆栈（先进后出），队列（先进先出）；

3、EventLoop(事件循环)

      由于js是单线程的所以js所有任务分为两种：同步任务和异步任务。

      同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

      异步任务：异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

     事件循环：就是同步任务进入主线程，异步任务加入到任务队列中。等主线程的任务执行完就去执行任务队列中的任务，这个过程会不断重复。（如下图所示）

4、宏任务和微任务

      任务队列又分为宏任务和微任务，宏任务队列可以有多个、微任务队列只有一个。

      EventLoop执行步骤：我们代码开始执行都是从script（全局任务）开始，所以，一旦我们的全局任务（属于宏任务）执行完，就马上执行完整个微任务队列。

      宏任务：script（全局任务）, setTimeout, setInterval, setImmediate, I/O, UI rendering；

      微任务：process.nextTick, Promise, Object.observer, MutationObserver；

5、最后给大家附一张我认为特别有价值的图帮助大家加深理解

   

6、执行顺序

1、先执行主线程

2、遇到宏队列（macrotask）放到宏队列（macrotask）

3、遇到微队列（microtask）放到微队列（microtask）

4、主线程执行完毕

5、执行微队列（microtask），微队列（microtask）执行完毕

6、执行一次宏队列（macrotask）中的一个任务，执行完毕

7、执行微队列（microtask），执行完毕

8、依次循环。。。