JS异步模式-事件循环

目前主流的javaScript环境都是单线程执行的，采用单线程设计的原因，是因为最早的设计初衷是运行在浏览器端的脚本语言，目的是实现页面上元素的dom交互，所以这就决定了他必须使用单线程模型，否则两个线程同时操作一个dom元素时，浏览器可能会不知所措，该以哪个线程的执行结果为准呢？

单线程指的是：JS执行环境中，负责执行代码的线程只有一个。
这种方式的好处是更安全，更简单。
缺点就是，当遇见耗时操作，只能等待，会出现假死的状况。

那为了解决耗时任务阻塞执行的这种问题，js将任务的执行模式分为了两种，同步模式（Synchronous）和异步模式（Asynchronous）

同步模式就不在赘述了，指的就是代码中的任务依次执行，后一个任务需要等待前一个任务结束，才能够开始执行，程序的执行顺序与代码的编写顺序是一致的

异步模式

异步模式不会等待这个任务结束，才开始执行下一个任务。对于耗时操作呢，他都是开启过后就立即往后执行下一个任务。那耗时任务的后续逻辑呢，我们会通过回调函数的方式去定义。他在内部呢，我们这个耗时任务完成过后呢，就会自动执行我们这里传入的回调函数。那异步模式非常重要，因为如果没有这种模式的话，我们单线程的JS语言，它就无法同时处理大量的耗时任务。而对于开发者而言，单线程模式下面的异步，它最大的难点就是代码执行的顺序，并不会像同步代码一样通俗易懂，因为它的执行顺序，相对会比较跳跃。

image.png

CallStack：函数调用栈
Queue：消息队列，也叫回调队列
Web APIs：内部API环境，以web平台举例子（宏任务集散地）
Event loop：事件循环机制，（他的作用就是CallStack为空了，把Queue中的函数继续往CallStack中压）

正常同步代码在CallStack执行

• 遇到宏任务，setTimeout，就在WebAPI开启一个倒计时。
• 继续同步执行，直到CallStack清空，没有可执行的了，Event loop启用，把Queue中的函数继续往CallStack中压，现在Queue里也没有就没反应。
• 直到WebAPI中的倒计时结束，将回调函数放入Queue
• Event loop又把Queue中的放入CallStack

宏任务包含：
script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

• 在CallStack执行中遇到微任务，就把微任务直接放入Queue

微任务包含：
Promise.then
Object.observe
MutaionObserver
process.nextTick(Node.js 环境)