JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：一类是基于 Browsing Context，一种是基于 Worker。二者的运行是独立的，也就是说，每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop，每一个 Web Worker 也有一个独立的 Event Loop。

了解事件循环的同学都知道，在事件循环中，异步事件并不会放到当前任务执行队列，而是会被挂起，放入另外一个回调队列。当前的任务队列执行结束以后，JavaScript引擎回去检查回调队列中是否有等待执行的任务，若有会把第一个任务加入执行队列，然后不断的重复这个过程。

从现象上来看，宏任务和微任务产生的异步操作，都会在执行队列完成后再执行，所以貌似宏任务和微任务都放到回调队列中。

真的是这样吗？

肯定不是。如果真的是这样，那宏任务和微任务在意义上便没有区别了。

首先我们肯定要坚持一点：宏任务和微任务在意义上肯定是有绝对区别的。

看一下在浏览器环境下能够触发宏任务的操作都有哪些（其他环境下会有不同）：

• I/O 操作
• setTimeout
• setInterval
• requestAnimationFrame（争议，后面会讨论）

以 setTimeout 为例。由于 JavaScript 是单线程，所以 setTimeout 的计时操作一定不是JavaScript来做的，否则会造成代码执行的阻塞。

那么这种操作是由谁来做的？是宿主环境。以浏览器为例子，JavaScript 在执行到 setTimeout 时会告诉浏览器：“Hey boy！这有个定时器，你帮我看着点，等到点了你告诉我一下”。这时候浏览器就会进行一个计时操作，计时完成以后，将 setTimeout 的回调放入 JavaScript事件循环的回调队列中。这样 JavaScript 就可以在接下来的执行中处理这个回调。

我们看一下上面列出来的4点触发宏任务的操作，全部与浏览器相关！

所以，我个人的理解是：宏任务便是 JavaScript 与宿主环境产生的回调，需要宿主环境配合处理并且会被放入回调队列的任务都是宏任务。

浏览器下触发微任务的操作为：

• Promise
• MutationObserver

这两个操作也都能够产生异步操作，那为什么与宏任务不一样呢。这里就要涉及到事件循环的另一个队列了--作业队列（微任务队列）。

为了更好的理解作业队列，我们把执行队列从开始到结束这样的一个过程，称为一个tick，回调队列的第一个事件则会在下一个tick中被执行，第二个事件会在下下个tick中...这样依次执行。

而作业队列则是位于当前tick的最尾部，在当前tick中添加的微任务都不会留到下一个tick，而是在tick的尾部触发执行。

一个事件循环中，在执行队列里的任务执行完毕以后，会有一个单独的步骤，叫 Perform a microtask checkpoint，即执行微任务检查点。这个操作是检查作业队列中是否有微任务，如果有，便将作业队也会当作执行队列来继续执行，完毕后将执行队列置空。

所以，这里我们就可以确定的说：同一个执行队列产生的微任务总是会在宏任务之前被执行。

那么，我们现在回答第三点开始提出来的问题，宏任务和微任务的意义区别在哪呢？

其实宏任务是能够在宿主环境的协助下，通过回调队列来完成异步操作，微任务则是在宏任务执行前，进行某些操作，告诉 Javascript 引擎在处理完当前执行队列后，尽快地执行我们的代码。

JavaScript的宏任务与微任务只是众多JavaScript知识中的一个知识点，倘若我们还没有完全弄明白的可以去动力节点在线网站的JavaScript视频教程，里面的名师讲授各种详细知识点，快速帮助我们打下坚实的基础。