前言：
虽然自己学了javascript并且一直在使用，但从来没对他的原理进行了解，就只停留在会用阶段（尴尬）。忽然有一天，组长在群里发让写一篇关于‘javascript的单线程和异步机制’的博客。这下可得学一下了。
单线程与异步：
说到单线程和异步，我们首先想到的应该是这两两者本身是相互矛盾的，理论上是不能同时存在的，因为是单线程，所以程序的执行顺序就是从上到下依次执行，同一时间内只能有一段代码被执行。那假如这两者同时存在，单线程的程序执行到了需要异步的操作，就会需要等待，这时程序就会停下，后面的代码就不会执行，就会阻塞程序，这显然是不对的，所以单线程是不可以异步的。但是，我们的浏览器本身就存在大量的异步请求，这就注定我们的javascript即使是单线程，也必须支持异步。那怎么办？单线程压根就不支持异步你还非得要异步，这个时候就要感叹前人的智慧了。
思路：
虽然JavaScript是单线程的，可是浏览器内部不是单线程的。我们假设JavaScript只执行自己程序的代码，当遇到异步操作时把他丢给浏览器，由浏览器的线程去执行，自己继续往下执行，这样岂不是美哉。那问题来了，异步之后的程序JavaScript还是需要处理的，那怎么办？没关系，让浏览器执行完异步之后，再把异步执行完的东西在给我们JavaScript，让JavaScript去执行不就好了。好了，思路有了，让我们看看具体是怎么实现的吧。
开始：
上图是我偷来的（嘘！别说）。上图就是JavaScript的工作原理，我们来解释一下上图的各各东西：
WebAPIs：浏览器为异步任务单独开辟的线程（服务JavaScript的，处理JavaScript的异步）
虚线那一块（看图）：堆（heap）和栈（stack）共同组成了js主线程（这个就是我们JavaScript的线程）
callback queue（最下面的那个长方形）：任务队列，里面放着各种事件，比如我们点击所触发的事件，浏览器会帮我们以任务的形式，把他放入任务队列中
event loop（那个转圈圈）：任务循环，又叫事件循环。
好，解释完概念，开始正式说一下整体的工作流程。
流程：
当我们的程序运行时，执行我们JavaScript的主线程，堆（heap）和栈（stack）共同组成了JavaScript的主线程，函数的执行就是通过进栈和出栈实现的。比如图中有一个foo()函数，主线程把它推入栈中，在执行函数体时，发现还需要执行上面的那几个函数，所以又把这几个函数推入栈中，等到函数执行完，就让函数出栈。当栈中的函数需要异步的时候，主线程会把需要异步的部分推给WebAPIs（浏览器开辟的线程），由WebAPIs去执行。
当所有函数都执行完毕后，所有的函数就都被推出了栈。这个时候，程序就会通过event loop（事件循环）去callback queue（任务队列）中寻找下一个任务推入栈中。而WebAPIs（浏览器开辟的线程）执行完主程序推给他的异步之后，将处理后的结果以事件的形式丢到callback queue（任务队列）中，这个事件就是我们写代码的时候的回调函数。而这个时候任务队列里的任务正在往栈（stack）中推，所以异步之后的事件也会被推到栈（stack）中执行，但这个时候他已经不在是异步的了而是同步的，JavaScript的主线程是可以执行的。由此无论是同步还是异步，所有的函数全部执行完毕。（event loop（事件循环）总是会循环的查找任务队列里是否还有任务，有就往栈（stack）中推）
总结：
javascript的单线程和异步机制，总的来说JavaScript一直是单线程的，并不会去实现异步，浏览器才是实现异步的那个家伙，只是浏览器会通过事件驱动把异步之后的操作通过回调函数的形式丢到任务队列，在由JavaScript的主线程去执行回调函数。由此整个主程序都是同步，但由于浏览器线程的帮助，实现了异步的功能。
最后说明一下，以上内容都是我通过看别人的文档，并且根据自己的理解添油加醋之后的成果，本人纯属小白，以上内容如果有哪些地方理解的不对希望大家积极指出，我也好学习改正，谢谢。
借鉴博客：
https://zhuanlan.zhihu.com/p/23659122?refer=dreawer
https://www.cnblogs.com/sxz2008/p/6513619.html
原文：https://www.cnblogs.com/zhengyufeng/p/10895895.html