event loop 事件循环理解

运行JavaScript和渲染都有规定的时间段，基本是确定，这要归功于 事件环 event loop.

网页有一个主线程（mian thread），为什么称之为主线程？因为这里发生着大量的事件，是JavaScript发生的地方，是渲染发生的地方，是DOM存在的地方。这意味着网页上的大部分活动是有确定性的顺序，我们不会同时运行多段代码去修改同一个DOM。这意味着主线程上的任务需要大量的时间，比如200ms，这对用户交互体验来说是一段很长的时间。

因此，虽然有主线程，但是还是需要其他线程用来处理网络请求、编码解码、加密、监控输入设备等。但是，一旦这些线程有了需要页面响应的操作，他们需要通知主线程。这里就是 event loop去处理协调所有活动。

        以setTimeout()为例，倒计时时间肯定是不能在主线程等待，不然阻塞主线程上的其他活动，所以需要离开主线程去运行这个任务。这样就面临了另一个问题，我们是在主线程之外出发回调函数的，这显然是行不通的，最终会导致大量并行运行的代码，编辑相同的DOM。 于是就需要创建一个任务加入到任务队列，在一定时间里加入到主线程继续执行，这样就是在主线程上运行JavaScript代码了。这也是浏览器原理的核心部分，当你点击鼠标，操作系统是如何通知JavaScript的呢？通过向任务队列中添加任务；请求响应数据是如何进入到JavaScript中的，通过向任务队列中添加任务。任务环首先关注任务队列，不停的循环执行任务。

执行过程
浏览器环境
先执行<script>中的同步任务，然后所有微任务，一个宏任务，所有微任务，一个宏任务......

执行完主执行线程中的任务；

取出 Microtask Queue 中任务执行直到清空；

取出 Macrotask Queue 中一个任务执行；

重复 2 和 3 。

宏任务：

是指消息队列中的等待被主线程执行的事件，宏任务执行时都会重新创建栈，然后调用宏任务中的函数，栈也会随着变化，但宏任务执行结束时，栈也会随之销毁。

包括 整体代码script，setTimeout，setInterval ，setImmediate，I/O，UI renderingnew ，Promise*

微任务：

可以把微任务看成是一个需要异步执行的函数，****执行时机是在主函数执行结束之后、当前宏任务结束之前****

包括 Promises.(then catch finally)，process.nextTick， MutationObserver

微任务是基于消息队列、事件循环、UI 主线程还有堆栈而来的

宏任务和微任务的区别在于在事件循环机制中，执行的机制不同

每次执行完所有的同步任务后，会在任务队列中取出异步任务，先将所有微任务执行完成后，才会执行宏任务
所以可以得出结论， 微任务会在宏任务之前执行。
我们在工作常用到的宏任务是 setTimeout，而微任务是 Promise.then

注意这里是Promise.then,也就是说 new Promise在实例化的过程中所执行的代码是同步的，而在 then中注册的回调函数才是异步。