JS异步、event loop、微任务、宏任务

https://juejin.im/post/5be5a0b96fb9a049d518febc

“JavaScript 是单线程、异步、非阻塞、解释型脚本语言。”

单线程 、异步、非阻塞 、事件循环、消息队列，还有微任务、宏任务

为什么要有同步异步？

单线程语言：JavaScript 的设计就是为了处理浏览器网页的交互（DOM操作的处理、UI动画等），决定了它是一门单线程语言。如果有多个线程，它们同时在操作 DOM，那网页将会一团糟。

那如果一个任务的处理耗时（或者是等待）很久的话，如：网络请求、定时器、等待鼠标点击等，后面的任务也就会被阻塞，也就是说会阻塞所有的用户交互（按钮、滚动条等），会带来极不友好的体验。

其实事件循环event loop机制和消息队列的维护是由事件触发线程控制的。

事件触发线程同样是浏览器渲染引擎提供的，它会维护一个消息队列。JS引擎线程遇到异步（DOM事件监听、网络请求、setTimeout计时器等...），会交给相应的线程单独去维护异步任务，等待某个时机（计时器结束、网络请求成功、用户点击DOM），然后由事件触发线程将异步对应的回调函数加入到消息队列中，消息队列中的回调函数等待被执行。

事件循环机制：

JS引擎线程会维护一个执行栈，同步代码会依次加入到执行栈中依次执行并出栈。

JS引擎线程遇到异步函数，会将异步函数交给相应的Webapi，而继续执行后面的任务。

Webapi会在条件满足的时候，将异步对应的回调加入到消息队列中，等待执行。

执行栈为空时，JS引擎线程会去取消息队列中的回调函数（如果有的话），并加入到执行栈中执行。

完成后出栈，执行栈再次为空，重复上面的操作，这就是事件循环(event loop)机制。

这里有一个新概念：macrotask（宏任务） 和microtask（微任务）。

所有任务分为macrotask和microtask:

macrotask：主代码块、setTimeout、setInterval等（可以看到，事件队列中的每一个事件都是一个 macrotask，现在称之为宏任务队列）

microtask：Promise、process.nextTick等

执行机制：

执行一个宏任务（栈中没有就从事件队列中获取）

执行过程中如果遇到微任务，就将它添加到微任务的任务队列中

宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）

当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染

渲染完毕后，JS引擎线程继续，开始下一个宏任务（从宏任务队列中获取）

JavaScript 是单线程语言，决定于它的设计最初是用来处理浏览器网页的交互。浏览器负责解释和执行 JavaScript 的线程只有一个（所有说是单线程），即JS引擎线程，但是浏览器同样提供其他线程，如：事件触发线程、定时器触发线程等。

异步一般是指：、网络请求、计时器、DOM事件监听