一、单线程
可能大家都听过，js是单线程运行的。但这句话到底代表着啥？什么是单线程？难道有多线程？还有经常听到的进程又是个啥东东？所以在讲这句话之前，我们先来理清进程和线程这两个概念。
进程和线程都是操作系统的概念。进程是应用程序的执行实例，每一个进程都是由私有的虚拟地址空间、代码、数据和其它系统资源所组成；进程在运行过程中能够申请创建和使用系统资源（如独立的内存区域等），这些资源也会随着进程的终止而被销毁。而线程则是进程内的一个独立执行单元，在不同的线程之间是可以共享进程资源的，所以在多线程的情况下，需要特别注意对临界资源的访问控制。在系统创建进程之后就开始启动执行进程的主线程，而进程的生命周期和这个主线程的生命周期一致，主线程的退出也就意味着进程的终止和销毁。主线程是由系统进程所创建的，同时用户也可以自主创建其它线程，这一系列的线程都会并发地运行于同一个进程中。
简单来说，比如我要生产一批衣服，那我就需要一个生产车间，我给这个车间提供了生产所需的布料、场地等，这个车间就是进程。如果车间里只有一条流水线，大家依次做手头的工作，这就是单线程。但这种工作方式不免出现由于一个工人的手脚慢导致后面的工人都在等待的情况出现从而影响整个工期。所以一个车间里往往有多条流水线负责不同的工作，每条流水线互不干扰，如果一条延期了其他不受影响，这就是多线程。从这个例子我们简单抽取下单线程和多线程各自的特点和区别：
- 单线程：只有一个线程，代码顺序执行，容易出现代码阻塞（页面假死）。
- 多线程：有多个线程，线程间独立运行，能有效地避免代码阻塞，并且提高程序的运行性能。
可以看到多线程其实是比较占优势，事实上，大多数语言采用的也是多线程运行。那竟然如此，为何JavaScript却选择了单线程的方式运行呢？
这就跟js的用途有关了，因为在浏览器中，js主要是用于页面交互以及操作页面的DOM元素的。如果有两个线程，一个线程要求删除DOM元素，另一个线程却要修改DOM元素的样式，那浏览器就无法确定应该听哪个线程的。虽然聪明的小伙伴可能知道可以加个”锁“，但是这就会提高了复杂度，要知道，js可是用了十天就设计出来了呀，不可能搞得这么复杂滴。所以从诞生以来，js就一直是单线程执行的。
二、浏览器线程
竟然js是单线程执行的，那各种http请求和事件触发以及逻辑运行怎么可能执行的过来？其实不要混淆了，js线程一般只负责js的解析和执行。而上面说的请求和事件触发这些都是由浏览器处理的，而浏览器却是多线程的。一般的浏览器有以下几个线程：
- 事件触发线程：处理常见的DOM操作。
- 定时器线程：处理定时器任务，如setTimeout、setInterval。
- http请求线程：处理http请求。
- 渲染引擎线程：负责页面的渲染，当页面发生重绘和回流时会执行该线程。
- js引擎线程：负责js的解析和逻辑执行。
我们所说的“js是单线程”指的就是浏览器一般只开一个js引擎线程来执行js。而在执行过程中遇到定时器或者http请求等，会丢给上面相对应的线程执行，而js则继续运行自己代码，这样就不会阻塞了，等到http请求或定时器等返回回调函数的时候且js引擎没有任务时（具体见下文），js再执行这个回调函数，这就是异步和回调。
当然js执行过程中不可避免也有比如复杂运算或多重循环等耗时操作，针对这个问题HTML5提出了Web Worker，它会在当前js执行主线程中利用Worker类新开辟一个额外的线程来加载和运行特定的JavaScript文件，这个新的线程和JavaScript的主线程互不干扰。同时HTML5也规定了 Web Worker中是不能操作DOM的，任何需要操作DOM的任务都需要委托给JavaScript主线程来执行，所以虽然引入HTML5 Web Worker，但仍然没有改变JavaScript单线程的本质。
三、EventLoop
好了，前面铺垫那么多，终于来到了标题所讲的部分了。那么，什么是任务队列和EventLoop呢？
其实，在js执行过程中，分为一个主执行栈和一个任务队列。js的代码执行会在主执行栈中进行，遇到http请求和定时器等异步操作的时候会丢给对应线程执行。而每个异步任务都有一个回调函数，等到请求操作完成或者定时器数秒完成之后，会把对应的回调函数放入到任务队列中。而js主执行栈里面的内容为空后，就会来任务队列里面按队列顺序取一个函数到主执行栈里执行，等函数执行完成之后栈又空了，再来任务队列里取函数执行，如此反复循环直到任务队列和栈都为空，这就是所谓的事件循环机制EventLoop。
以一段代码作为例子讲解下：
function a(){
console.log('this is a function');
}
function b(){
console.log('this is b function');
a();
}
setTimeout(function() {
console.log('this is setTimeout');
}, 0);
b();
1.这段代码在执行b函数之前，遇到setTimeout，所以将setTimeout丢到定时器线程里面去数秒，而主执行栈继续执行，所以调用函数b，函数b入主执行栈。
2.零秒很快数完，所以setTimeout后面的回调函数被放入到任务队列里面，但是主执行栈里面现在不为空，所以还没有轮到任务队列里的函数执行。
3.调用函数b的时候就创建了主执行栈的第一帧，里面包含了b函数的参数和局部变量等，执行输出this is b function。当b调用a时，创建第二帧，同样该帧包含a函数的参数和局部变量，执行输出this is a function。a执行结束，第二帧就出栈。同时b也执行结束了，第一帧出栈，此时主执行栈就为空了。
4.主执行栈为空后，就开始调用任务队列里面的任务。取出第一个回调函数执行，创建新的第一帧，执行输出this is setTimeout。执行完毕该帧出栈，栈为空，继续去任务队列取下一个任务到栈里执行。如此循环反复。
