Javascript事件循环——Event loop
引言
Javascript是一门单线程的脚本语言，无法进行多线程编程;
因此为了不阻塞编程，Javascript通过事件循环的方式解决耗时任务，实现类多线程编程；
单线程
单线程意味着在浏览器中，同一时间只能做一件事，其他的行为和事件都会在事件队列中排队；
Javascript单线程的特性与其用途有关；作为浏览器脚本语言，我们需要进行各种DOM操作，如果Javascript是多线程的，当两个线程同时操作同一DOM，一个向其添加事件，一个要删除此节点，浏览器该以哪个线程为准呢。
HTML5 webworker技术，允许Javascript脚本创建多个线程，但子线程完全受主线程控制，且不得操作DOM，未能改变其单线程的本质。
执行环境 Execution Context
每当程序的执行流入到一个可执行的代码区块时，就进入到一个执行环境中；
当Javascript被浏览器载入后，默认最先进入的是全局执行函数，之后，函数的每次调用都会新建执行环境；
执行环境栈 Execution stack
执行流依次进入的执行环境在逻辑上形成一个栈，栈的底部总是全局执行环境；栈的顶部是处于活动状态的当前的执行环境；
每个函数都有自己的执行环境，当执行流进入一个函数时，函数的环境会被推入一个环境栈中，函数执行完成后，栈将其环境弹出，把控制权还给之前的执行环境；
注意每次函数调用都会创建一个执行环境压入栈中，无论是函数内部的函数还是递归；
事件循环
运行机制
- 事件循环器会检查事件队列是否为空，如果为空，继续检查；不为空，执行2；
- 取出事件队列的首项，压入执行栈；
- 执行任务；
- 检查执行栈是否为空，如果为空，执行1；不为空，继续检查；
macro task与micro task
异步任务被分成两类微任务（micro task）和宏任务（macro task）；
macro task：
script 指一开始执行的 <script> 标签
setTimeout();
setInterval();
setImmediate()
I/O
交互事件
micro task：
new Promise();
new MutaionObserver();
同一事件循环中，微任务的执行优先级高于宏任务，只有当微任务为空后，才会去宏任务的执行队列中取出最前面的一个事件，压入执行栈
注意事项
- 异步程序是一个一个独立的任务，这些任务包括：setTimeout、setInterval、ajax、eventListener等
- 事件队列严格按照时间先后顺序将任务压入执行栈中；
- 当执行栈为空时，浏览器会一直不停的检查事件队列，如果不为空，则取出第一个任务；
- 在每一个任务结束后，浏览器会对页面进行渲染；保障用户浏览页面时不会出现页面阻塞的可能；
- 当执行栈为空时，便生成一个microtask检查点；
- 微任务的执行优先级高于宏任务；
扩展
内存区域 堆（heap）和栈(stack)
Javascript执行代码时会将不同的变量存于内存中不同的位置：堆（heap）和栈（stack）,堆中存放着对象，栈中存放着一些基础类型的变量以及对象的指针；
stack是有结构的，每个区块按照一定次序存放，可以明确知道每个区块的大小；heap是没有结构的，数据可以任意存放，因此stack的寻址速度快于heap;
每个线程分配一个stack，每个进程分配一个heap，stack是线程独占的，heap是线程共用的。
stack创建时，大小确定，数据超过这个大小，会发生stack overflow错误；
heap大小不确定，需要的话可以不断增加；
数据存放的规则是：只要是局部的，占用空间确定的数据，一般放在statck，否则放在heap里面；
stack数据在任务结束后就会销毁；
heap中的数据的销毁依赖垃圾清理机制；一般内存泄漏发生在heap,即某些内存不再使用，却因为种种原因，没有被系统回收；
参考文章
深入理解 JavaScript 事件循环（一）— event loop
[译] 深入理解 JavaScript 事件循环（二）— task and microtask
详解JavaScript中的Event Loop（事件循环）机制
Tasks, microtasks, queues and schedules
Stack的三种含义
JavaScript 运行机制详解：再谈Event Loop