原文来自：https://www.jianshu.com/p/8821c6432fe1，这里做一个读后整理记录！
首先js是单线程的，也就是说js同时只能执行一个任务。那么js为什么被设计为单线程呢？
这与浏览器的用途有关，js的主要用途是与用户交互和操作dom，假设一段代码，被分配给两个或多个线程去执行，一个线程执行的代码在添加dom，另一个在删除dom，那么两个操作的结果以哪个为准？保留哪个结果呢？所以为了避免复杂性，js从一开始就被设计为单线程。
这个时候就会产生一个疑问，既然js是单线程的，那一些异步请求，定时任务等等这些是怎么实现的呢？
其实这些都是因为浏览器或node（宿主环境）是多线程的，也就是说由浏览器提供了一些辅助进程帮助js线程进行操作。
浏览器有很多线程，这里列出来一些比较重要的线程：
1、GUI 渲染线程
2、JS 引擎线程
3、定时器触发线程 (setTimeout)
4、浏览器事件线程 (onclick)
5、http 异步线程
6、EventLoop轮询处理线程
7、…
我们对这些线程进行下分类：
类别A：GUI 渲染线程
类别B：JS 引擎线程
类别C：EventLoop轮询处理线程
类别D：其他线程，有 定时器触发线程 (setTimeout)、http 异步线程、浏览器事件线程 (onclick)等等。
注意：类别A和类别B是互斥的，js语言设定js引擎与GUI引擎是互斥的，也就是说GUI引擎在渲染时会阻塞js引擎计算。原因很简单，如果在GUI渲染的时候，js改变了dom，那么就会造成渲染不同步.。下面的讨论，就不涉及类别A了，只讨论类别B、C、D之间的关系。
类别B：JS 引擎线程
JS 引擎线程，我们把它称为 主线程 ，它是干嘛的？即运行JS代码的那个线程（不包括异步的那些代码），比如：
1 var a = 2;
2 setTimeout()
3 ajax()
4 console.log()
第1、4行代码是同步代码，直接在主线程中运行；第2、3行代码交给其他线程运行。
主线程运行JS代码时，会生成个 执行栈 ，可以处理函数的嵌套，通过出栈进栈这样，
消息队列（任务队列）
可以理解为一个静态的队列存储结构，非线程，只做存储，里面存的是一堆异步成功后的回调函数，肯定是先成功的异步的回调函数在队列的前面，后成功的在后面。
注意：是异步成功后，才把其回调函数扔进队列中，而不是一开始就把所有异步的回调函数扔进队列。比如setTimeout 3秒后执行一个函数，那么这个函数是在3秒后才进队列的。
类别D：
JS代码中，碰到异步代码，就被放入相对应的线程中去执行，比如：
1 var a = 2;
2 setTimeout(fun A)
3 ajax(fun B)
4 console.log()
5 dom.onclick(func C)
主线程在运行这段代码时，碰到2 setTimeout(fun A)，把这行代码交给 定时器触发线程 去执行
碰到3 ajax(fun B)，把这行代码交给 http 异步线程 去执行
碰到5 dom.onclick(func C) ，把这行代码交给 浏览器事件线程 去执行
注意：这几个异步代码的回调函数fun A，fun B，fun C，各自的线程都会保存着的，因为需要在未来执行啊。。。
所以，这几个线程主要干两件事：
1、执行主线程扔过来的异步代码，并执行代码
2、保存着回调函数，异步代码执行成功后，通知 EventLoop轮询处理线程 过来取相应的回调函数
类别C，EventLoop轮询处理线程：
上面我们已经知道了，有3个东西
1、主线程，处理同步代码
2、类别D的线程，处理异步代码
3、消息队列，存储着异步成功后的回调函数，一个静态存储结构
这里再对消息队列说一下，其作用就是存放着未来要执行的回调函数，比如
setTimeout(() => {
console.log(1)
}, 2000)
setTimeout(() => {
console.log(2)
}, 3000)
在一开始，消息队列是空的，在2秒后，一个 () => { console.log(1) } 的函数进入队列，在3秒后，一个 () => { console.log(2) }的函数进入队列，此时队列里有两个元素，主线程从队列头中挨个取出并执行。
到这里我们就知道了，这3个东西大概的作用、关系和流程，但是，它们3个互相怎么交流的？这需要一个中介去专门去沟通它们3个，而这个中介，就是 EventLoop轮询处理线程
既然叫轮询了，那么肯定是不断的循环的去交流和沟通，如下图，顺时针看
注意：
整个的流程是循环往复的。
只有主线程的同步代码都执行完了，才会去队列里看看还有啥要执行的没
在异步线程类别D那里，还有一些小区别：
主线程把setTimeout、ajax、dom.onclick分别给三个线程，他们之间有些不同
1、对于setTimeout代码，定时器触发线程在接收到代码时就开始计时，时间到了将回调函数扔进队列。
2、对于ajax代码，http 异步线程立即发起http请求，请求成功后将回调函数扔进队列。
3、对于dom.onclick，浏览器事件线程会先监听dom，直到dom被点击了，才将回调函数扔进队列。
对于setTimeout，setInterval的定时，不一定完全按照设想的时间的，因为主线程里的代码可能复杂到执行很久，所以会发生你定时3秒后执行，实际上是3.5秒后执行（主线程花费了0.5秒）