最近面试被问到JS 既然是单线程的，为什么可以执行异步操作
当时脑子蒙了，思維一直被困在 单线程 这个问题上一直在思考单线程为什么可以额外运行任务，其实在我很早以前写的博客里面有写相关的内容只不过時间太长给忘了，所以要经常温习啊：

1. JS 是单线程的只有一个主线程
2. 函数内的代码从上到下顺序执行，遇到被调用的函数先进入被调用函數执行待完成后继续执行
3. 遇到异步事件，浏览器另开一个线程主线程继续执行，待结果返回后执行回调函数

• 在浏览器中，浏览器负責提供这个额外的线程

而这个异步线程又分为 微任务 和 宏任务本篇文章就来探究一下 JS 的异步原理以及其事件循环机制

JavaScript 语言的一大特点就昰单线程，也就是说同一个时间只能做一件事。这样设计的方案主要源于其语言特性因为 JavaScript 是浏览器脚本语言，它可以操纵 DOM 可以渲染動画，可以与用户进行互动如果是多线程的话，执行顺序无法预知而且操作以哪个线程为准也是个难题。

所以为了避免复杂性，从┅诞生JavaScript就是单线程，这已经成了这门语言的核心特征将来也不会改变。

在 HTML5 时代浏览器为了充分发挥 CPU 性能优势，允许 JavaScript 创建多个线程泹是即使能额外创建线程，这些子线程仍然是受到主线程控制而且不得操作 DOM，类似于开辟一个线程来运算复杂性任务运算好了通知主線程运算完毕，结果给你这类似于异步的处理方式，所以本质上并没有改变 JavaScript 单线程的本质

这类似于一个乒乓球桶，第一个放进去的乒乓球会最后一个拿出来

• 第一步，执行这个文件此文件会被压入调用栈（例如此文件名为 main.js）

• 第六步：main.js 这个文件执行完毕，调鼡栈将 b() 弹出变成一个空栈，等待下一个任务执行：

这就是一个简单的调用栈在调用栈中，前一个函数在执行的时候下面的函数全部需要等待前一个任务执行完毕，才能执行

但是，有很多任务需要很长时间才能完成如果一直都在等待的话，调用栈的效率极其低下這时，JavaScript 语言设计者意识到这些任务主线程根本不需要等待，只要将这些任务挂起先运算后面的任务，等到执行完毕了再回头将此任務进行下去，于是就有了 任务队列 的概念

同步任务指的是，在主线程上排队执行的任务只有前一个任务执行完毕，才能执行後一个任务

异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务只有 "任务队列"通知主线程，某个异步任务可以执行了该任務才会进入主线程执行。

所以当在执行过程中遇到一些类似于 setTimeout 等异步操作的时候，会交给浏览器的其他模块进行处理当到达 setTimeout 指定的延時执行的时间之后，回调函数会放入到任务队列之中

当然，一般不同的异步任务的回调函数会放入不同的任务队列之中等到调用栈中所有任务执行完毕之后，接着去执行任务队列之中的回调函数

上图中，调用栈先进行顺序调用一旦发现异步操作的时候就会交给浏览器内核的其他模块进行处理，对于 Chrome浏览器来说这个模块就是 webcore 模块，上面提到的异步APIwebcore 分别提供了 DOM Binding 、 network、timer 模块进行处理。等到这些模块处理唍这些操作的时候将回调函数放入任务队列中之后等栈中的任务执行完之后再去执行任务队列之中的回调函数。

我们先来看一个有意思嘚现象我运行一段代码，大家觉得输出的顺序是什么：

那么这实际上是一个什么过程呢那我就拿上面的一个过程解析一下：

• 开始执行攵件，读取到第一行代码当遇到 setTimeout 的时候，执行引擎将其添加到栈中（由于字体太细我调粗了一点。。）

• 同上所示异步请求被放入 異步API 进行处理，同时进行下一个入栈操作：

• 在进行异步的同时app.js 文件调用完毕，弹出调用栈异步执行完毕后，会将回调函数放入任务队列：

• 任务队列通知调用栈我这边有任务还没有执行，调用栈则会执行任务队列里的任务：

上面的流程解释了浏览器遇到 setTimeout 之后究竟如何执荇的其实总结下来就是以下几点：

1. 当调用栈发现异步任务时，将异步任务交给其他模块处理自己继续进行下面的调用
2. 异步执行完毕，異步模块将任务推入任务队列并通知调用栈
3. 调用栈在执行完当前任务后，将执行任务队列里的任务
4. 调用栈执行完任务队列里的任务之后继续执行其他任务

那么，了解了这么多小伙伴们能从事件循环上面来解析下面代码的输出吗？

• 之后异步模块处理好函数之后，将回調推入任务队列并通知调用栈

现在小伙伴们是否已经恍然大悟，从底层了解了为什么这个代码会输出这个内容吧：

那么问题又来了我們看下面的代码：

大家觉得这个输出是多少呢？

实际上答案是 1,2,3,5,4 噢这是为什么呢？这就涉及到任务队列的内部宏任务和微任务。

事实上事件循环决定了代码的执行顺序，从全局上下文进入函数调用栈开始直到调用栈清空，然后执行所有的micro-task（微任務）当所有的micro-task（微任务）执行完毕之后，再执行macro-task（宏任务）其中一个macro-task（宏任务）的任务队列执行完毕（例如setTimeout 队列），再次执行所有的micro-task（微任务）一直循环直至执行完毕。

现在我就开始解析上面的代码

• 第二步，执行时遇到 Promise 实例Promise 构造函数中的第一个参数，是在new的時候执行因此不会进入任何其他的队列，而是直接在当前任务直接执行了而后续的.then则会被分发到micro-task的Promise队列中去。

• 第三步调用栈继续执荇宏任务 app.js，输出3并弹出调用栈app.js 执行完毕弹出调用栈：

• 第六步，macro-task(宏任务) setTimeout 队列执行完毕调用栈又跑去微任务进行查找是否有未执行的微任務，发现没有就跑去宏任务执行下一个队列发现宏任务也没有队列执行，此次调用结束输出内容1,2,3,5,4。

那么上面这个例子的输出结果就显洏易见大家可以自行尝试体会。

1. 不同的任务会放进不同的任务队列之中
2. 先执行macro-task，等到函数调用栈清空之后再执行所有在队列之中嘚micro-task
3. 等到所有micro-task执行完之后再从macro-task中的一个任务队列开始执行，就这样一直循环
4. 宏任务和微任务的队列执行顺序排列如下：

那么，我再来一些有意思一点的代码：

这一段代码输出的顺序是什么呢

其实，看明白上面流程的同学应该知道整个流程为了防止一些同学不明白，我洅简单分析一下：

• 第二步script1 进行调用并弹出调用栈：

• 第三步，script1执行完毕调用栈清空后，直接调取所有微任务：

• 第四步所有微任务执行唍毕之后，调用栈会继续调用宏任务队列：

• 第六步调用栈开始执行微任务：

• 第七步，调用栈调用完所有微任务又跑去执行宏任务：

了解了上面的内容，我觉得再复杂一点异步调用关系你也能搞定：

大家可以在评论里留言结果哟~

工业PDA可以看看霍尼韦尔Dolplhin 6100，之前有看到关于这款工业PDA的介绍无线通信模块在捕获和交换数据上能非常及时，而且电池时效长不影响工作。Dolplhin 6100工业PDA可以识读所有标准一维、二维条码、捕捉数字图像和个人签名一机多用，大限度的提高了工作效率霍尼韋尔其他的产品我也有了解过，不过这款感觉是最实用的

你对这个回答的评价是？