JS是单线程的，可以执行异步任务实现原理

宏任务有：1)setTimeout, setInterval, setImmediate，2)I/O、3)、UI rendering等

微任务有：1)process.nextTick、2)Promise、3)Object.observe(已废弃)、4)MutationObserver(html5新特性)等

一、单线程

JS是单线程，这句话没错。但更确切的说JS只有一个主线程，但是其实他还有一些其他线程的，当然所有函数任务只可以在主线程执行。

这样命名很不方便？为什么要这样设计？这事有一定原因的。

JS作为浏览器的脚本于是，其最根本的作用就是实现用户与浏览器的交互行为，当一个用户要删除一个A，又同时向A中添加内容的时候，若是多线程，应该怎么样去处理？没有办法处理，若是单线程就很简单了，用户先执行那个操作，我们主线程就进行哪一个，不会出现任何冲突

二、异步

JS明明单线程，但又同时可进行异步操作，这两者不是完全相反的嘛？

没错，JS是单线程，但是JS是在浏览器中运行的脚本语言，它的宿主，浏览器可不是单线程的，这时候，大家又会产生疑问，这两者之间有什么关系呢？下面我们就来讲讲：

1、任务队列

单线程只有前一个任务结束，才能执行下一个任务。如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。

JS语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。

于是呢，任务就被分成两种，一种是同步任务，一种是异步任务

同步任务：只有前一个任务执行完成后，才可执行下一个任务，在主线程中

异步任务：这个队列的所有任务都是不进入主线程执行，而是被浏览提供的线程执行，当执行完毕后就会产生一个回调函数，并且通知主线程，在主线程执行完当前所执行的任务后，就会调取最早通知自己的回调函数，使其进入主线程中执行，比如ajax请求，再主线程中呈现的就是请求结果~

解析：
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件（回调函数callback）。
（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

“任务队列”是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在”任务队列”中添加一个事件，表示相关的异步任务可以进入”执行栈”了。主线程读取”任务队列”，就是读取里面有哪些事件。

“任务队列”中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入”任务队列”，等待主线程读取。

所谓”回调函数”（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

“任务队列”是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，”任务队列”上第一位的事件就自动进入主线程。但是，由于存在后文提到的”定时器”功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。

这下就很清楚了！原来这就是我们常说的单线程与异步~必须要依赖于浏览器的！

作者：湘兰沅芷
链接：https://www.jianshu.com/p/bb41eeff43f4
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。