JS & 事件循环机制、调用栈、堆、主线程、宏任务队列、微任务队列、缓存管理之间的关系

一、事件循环机制

你是否想过，在控制台执行代码时，为什么能立即得到响应？
实际上，底层有一套模型机制叫 事件循环，换句话说，它是一个”死循环“，
里面负责监听&执行我们写的 JS 代码，咋们暂且称为一个处理代码的容器。

事件循环负责执行代码，而执行是一套机制存在的，这里借用 MDN 的图：

下面我将一一解释每个机制的作用。

二、调用栈与堆

2.1 调用栈

当我们调用一个函数时，这个函数就会进入栈，在图上面则对应一个帧（Frame ），函数执行完后，”帧“便消失：

debugger
const foo = () => {
   }
foo()

我们常看到的”栈溢出“？说的就是”帧“数量太多超出限制了！
所以在执行函数时，尽量少犯这种错误，比如循环、函数递归、定时器、像这些操作都要仔细妥善处理。

2.2 堆

从图中你也看出来了，堆其实放的就是引用类型的数据，换句话说，里面就是一块内存，存放对象数据的。

三、主线程

3.1 什么是主线程？

当我们正常地执行一个函数且不加以其它修饰时，这个函数便会被放到主线程里面去执行，比如：

const foo = () => {
   }
foo();

主线程是按序执行的，假如有大量的函数执行，每个函数都得等前面的函数完全地执行后才能轮到它执行。
这样会存在一个阻塞问题，假设有个请求商品列表函数，响应结果等了 3s，
而