事件循环机制(Event Loop)和宏任务(macro-tast)微任务(micro-tast)，详细讲解！！！

“事件循环机制” 和 “宏任务微任务” 也是前端面试中常考的面试题了。

首先，要深刻理解这些概念的话，需要回顾一些知识点。

知识点回顾

1、进程与线程

进程。

程序运行需要有它自己的专属内存空间，可以把这块内存空间简单的理解为进程

每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

线程。

线程是CPU的基本调度单位，是程序执行的一个完整流程。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为 主线程。

如果程序需要同时执行多块代码，主线程就会开启更多的线程来执行代码，所以一个进程中可以包含多个线程。

简单总结一些它们的关系：

• 一个进程中一般至少有一个运行的线程——主线程

• 一个进程中也可以同时运行多个线程

• 多个进程之间的数据是不能同时直接共享的

那浏览器有哪些进程与线程呢？

浏览器内部的工作其实极为复杂，它是多进程多线程的。且为了避免相互影响，它会自动启动多个进程。

比如，我们可以在浏览器任务管理器查看一下所有进程。

其中，最主要的进程有：

1. 浏览器进程

主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2. 网络进程

负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务

3. 渲染进程

渲染进程启动后，会开启一个 渲染主线程，主线程负责执行 HTML、CSS、JS代码

默认情况下，浏览器会为每一个标签页开启一个新的渲染进程，以保证不同的标签页之间不互相影响。

2、JS是单线程还是多线程？

JS肯定是单线程的。

如果是多线程会发生什么？ 如果JS是多线程，那当两个线程同时对dom进行操作，一个是添加事件，一个是删除dom，要怎么处理？ 所以为了避免这种情况，JS选择只用一个主线程来执行代码以保证一致性。

3、怎么去理解JS的异步？

上面写到JS是单线程的，它运行在浏览器的渲染主线程中，且渲染主线程有且仅有一个。 但是它却有很多任务，比如渲染页面、执行JS都包含在内。

那如果不使用异步，而是同步的方式，就极有可能造成主线程的阻塞，那其他任务就无法执行了，一方面消耗时间，另一方面页面又没法及时更新，很容易有卡死现象。

所以浏览器采用异步方式。 具体做法其实就是， 比如一些任务发生了，假设现在遇到了计时器，主线程会将任务交给其他线程处理，自己立马结束这个任务，转而执行后续代码。 而等其他线程完成后，将事先传递的回调函数包装成任务，再加入到消息队列的末尾排队，等待主线程的调度执行。

在这种异步模式下，浏览器就可以避免阻塞。

这一段解释涉及到操作系统的进程调度问题和我们所要理解的事件循环机制。暂时看不懂的，可以先往下看。

4、进程调度

进程调度的知识点稍多，比如抢占式调度，非抢占式调度，先来先服务，优先级调度等等。

我们这里就简单介绍一下先来先服务(FCFS)。

它的算法思想其实就是从“公平”的角度来考虑的 （我们可以理解成 排队买东西，先来排队的优先买）。所以它的算法规则，其实是按照 作业/进程 到达的先后顺序进行服务。 它是一种非抢占式算法 （可以理解成 “不允许你插队”），它不会导致 “饥饿”现象（也就是一直轮不到执行，苦苦等待），因为只要排队终有一天会轮到它的。

事件循环机制

介绍完一些知识点后，再理解一下主角“事件循环机制”

我们在前面说了，浏览器会通过渲染主线程去执行JS

1. 在最开始的时候，渲染主线程会进入一个无限的循环中

2. 每一次的循环，都会检查一下消息队列中是否存在任务。 如果存在任务，就取出第一个任务执行，执行完一个后进入下一次循环； 如果没有，就进入等待态（休眠）

3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务，如果主线程是等待态，会将其唤醒以继续循环拿取任务执行。

这种过程，也就被称为 事件循环(消息循环)

在上面的过程中，我们先简单的将消息队列理解成一个队列（虽然有具体划分）。 而队列的特性是先进先出，比如我们按顺序执行代码，分别遇到了 加法任务、输出任务、乘法任务。 那他们依次入队，渲染主线程循环获取任务也是按照这个顺序去执行的

宏任务和微任务

在上面为了便于简单的理解，说是当成一个队列，其实不是的。 JS中用来存储代执行回调函数的队列可以分为2种不同的队列，那就是 宏队列 和 微队列。 顾名思义就是分别用来保存待执行的宏任务和微任务(回调)。

常见的宏任务包括：

• setTimeout

• setInterval

• script(整体代码)

• I/O操作

• 等等

微任务包括：

• Promise

• Mutation

• 等等

既然会划分成2个队列，那肯定是要在JS执行时区别对待它们的。 JS引擎首先必须先执行所有的初始化同步任务， 在每次准备取出第一个宏任务执行前，都要看看有没有微任务，要一个个取出来执行。 当该宏任务执行完毕后，会检查其中的微任务队列，如果没有，那就直接执行下一个宏任务，如果不为空，那就依次执行微任务，执行完毕再执行下一个宏任务。

所以引入微任务的初衷是为了解决异步回调的问题。（其实我们可以理解为 微任务的优先级比较高，根据优先级调度算法，调度时会选优先级最高的进行调度执行）

即然说到优先级，就必须要提一下。
任务本身是没有优先级的，都是遵循先来先服务算法。 但是 消息队列是有优先级的。 也就是上面我们所说的 微队列比宏队列优先级高。所以每执行一次宏任务，都要看看有没有微任务的存在。

但随着浏览器复杂的提升，W3C似乎不再采用宏队列的说法。 而是至少分为了 延时队列、交互队列、微队列。 （它们优先级是从低到高的，微队列优先级最高）。具体内容可能还需要看一下官方解释。

如果我们想把一个函数添加到微队列，可以这么写

Promise.resolve().then(函数)

基本的介绍就结束了，应该差不多可以理解这些概念了。接下来可以看一道简单的题

<h1>Eric is handsome</h1>
<button>change</button>

<script>
    var h1 = document.querySelector('h1');
    var btn = document.querySelector('button');

    // 死循环指定时间
    function delay(duration){
        var start = Date.now();
        while(Date.now() - start < duration) {
        
        }
    }

    btn.onclick = function() {
        h1.textContent = "Eric真帅";
        delay(3000);
    }
</script>

对于以上代码，当我们点击按钮后，会发生什么呢？

实际上，点击完按钮后，需要经过3秒，h1的文本才会发生变化。

因为对于渲染主线程而言，运行解析JS代码以后，会用交互线程去监听按钮的点击事件。 （假设我们在某一个时刻点击了它，此时消息队列中没有其他任务）

那交互线程会将这个function作为一个任务，假设记为fn，添加至消息队列中。 渲染主线程会被唤醒从而调用fn任务。 所以可以执行function里面的代码了。 首先是h1.textContent = “Eric真帅”，fn任务会产生一个绘制任务（也就是改变h1文本），那这个绘制任务就会到消息队列中进行排队，此时fn任务继续执行到下一行 delay(3000)，也就是被阻塞了3秒。3秒后，fn执行完毕，进行循环，这时候获取了消息队列中的绘制任务，调度执行，文本发生改变。

如果有帮助的话，可以点赞收藏哦～～～