ajax请求是宏任务还是微任务_一篇搞定（Js异步、事件循环与消息队列、微任务与宏任务）...

前言

我们都知道javascript是一门单线程、异步、非阻塞、解析类型脚本语言。

• 单线程 ？？
• 异步 ？？
• 非阻塞 ？？
• 然后还有 事件循环、消息队列，还有微任务、宏任务这些

这几天在掘金、知乎等论坛翻阅了不少大佬的文章，似乎了解到了一二，然后在这里把自己的体会总结出来，帮助大家快速理解，也能增加自己的记忆。

单线程与多线程

JavaScript 的设计就是为了处理浏览器网页的交互(DOM操作的处理、UI动画等)，决定了它是一门单线程语言。如果有多个线程，它们同时在操作 DOM，那网页将会一团糟。

由此，我们就可以知道 js 处理任务是一件接着一件处理，从上往下顺序执行的

console.log('开始')
console.log('中间')
console.log('结束')

// 开始
// 中间
// 结束

这个时候，思维开拓的同学可能就会说 那如果一个任务的处理耗时(或者是等待)很久的话，如：网络请求、定时器、等待鼠标点击等，后面的任务也就会被阻塞，也就是说会阻塞所有的用户交互(按钮、滚动条等)，会带来极不友好的体验。

但是：

console.log('开始')
console.log('中间')
setTimeout(() => {
     
  console.log('timer over')
}, 1000)
console.log('结束')

// 开始
// 中间
// 结束
// timer over

会发现 timer over 会在 打印结束之后打印，也就是说计时器并没有阻塞后面的代码

其实，JavaScript 单线程指的是浏览器中负责解释和执行 JavaScript 代码的只有一个线程，即为JS引擎线程，但是浏览器的渲染进程是提供多个线程的，如下：

• JS引擎线程
• 事件触发线程
• 定时触发器线程
• 异步http请求线程
• GUI渲染线程

当遇到计时器、DOM事件监听或者是网络请求的任务时，JS引擎会将它们直接交给 webapi，也就是浏览器提供的相应线程(如定时器线程为setTimeout计时、异步http请求线程处理网络请求)去处理，而JS引擎线程继续后面的其他任务，这样便实现了 异步非阻塞。

定时器触发线程也只是为 setTimeout(..., 1000) 定时而已，时间一到，还会把它对应的回调函数(callback)交给 任务队列 去维护，JS引擎线程会在适当的时候去任务队列取出任务并执行。

JS引擎线程什么时候去处理呢？消息队列又是什么？

事件循环与消息队列

JavaScript 通过 事件循环 event loop 的机制来解决这个问题。

其实 事件循环 机制和 任务队列 的维护是由事件触发线程控制的。

事件触发线程 同样是浏览器渲染引擎提供的，它会维护一个 任务队列。

JS引擎线程遇到异步(DOM事件监听、网络请求、setTimeout计时器等...)，会交给相应的线程单独去维护异步任务，等待某个时机(计时器结束、网络请求成功、用户点击DOM)，然后由 事件触发线程 将异步对应的 回调函数 加入到消息队列中，消息队列中的回调函数等待被执行。

同时，JS引擎线程会维护一个 执行栈，同步代码会依次加入执行栈然后执行，结束会退出执行栈。

如果执行栈里的任务执行完成，即执行栈为空的时候(即JS引擎线程空闲)，事件触发线程才会从消息队列取出一个任务(即异步的回调函数)放入执行栈中执行。

消息队列是类似队列的数据结构，遵循先入先出(FIFO)的规则。

1. 所有同步任务都在主线程上执行，形成一个执行栈(execution context stack)。
2. 主线程之外，还存在一个"任务队列"(task queue)。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3. 一但"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4. 主线程不断重复上面的第三步。

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复，这种机制就被称为事件循环(event loop)机制。

上面说到了异步，JavaScript 中有同步代码与异步代码。，一种是同步任务(synchronous)，