1.下图为浏览器运行环境架构图：
（1）j引擎：调用栈、web APIs、Event Loop机制、宏任务队列、微任务队列
（2）渲染引擎
（3）网络通信模块
（4）GPU
(5) 和硬件、文件系统相关的模块等
c40235df5a0c23a4e2cca595631c9ef.jpg
2.下图是JS引擎的大致架构逻辑：
9420a56fe4954e402265bc955be772a.jpg
-
微任务的类型：
（1）then的回调
（2）catch的回调
（3）await的后续调用
（4）queueMicrotask 生成的函数
（5）MutationObserver的回调
6d77ecf5268dbcd697e5134f138a0ff.jpg 宏任务类型：
（1）script全部代码
（2）setTimeout、setInterval、setImmediate（浏览器暂时不支持，只有IE10支持，具体可见MDN）
（3）I/O
（4）UI Rendering
4.Event Loop：eventLoop检查主栈中执行完毕后，从微任务队列中取出所有微任务到主栈中执行，主栈再次执行完毕之后，从宏任务队列中取出最早压入的宏任务到主栈中执行，主栈为空之后再次取出微任务执行，如此循环。
5.为什么有Event Loop？
js引擎在单线程模式下执行代码的过程中，会遇到一些长任务，譬如说：网络请求，文件IO，需要等待用于交互等的操作，这些任务处理结果一般以callback函数或者Promise的形式体现。如果长时间等待这些长任务执行结束之后再执行其他代码，不仅会带来长时间的等待，也是在浪费CPU资源，因此需要一个机制来调起长任务，并且继续执行其他同步任务。
当长任务得到响应，例如网络请求到数据之后，关于数据的回调会被推进任务队列，而不是立即推入主栈执行，因为这样会扰乱正在执行的代码顺序。当主栈中已有的代码执行完毕之后，再从任务队列中取出任务推荐主栈执行。
