简介：很多文章在介绍线程以及线程之间的关系，都存在着脱节的现象。还有的文章过于广大，涉及到了内核，本文希望以通俗易懂的话去描述晦涩的词语，可能会和实际有一丢丢的出入，但是更易理解。我们都知道JS是单线程的，即 ...
很多文章在介绍线程以及线程之间的关系，都存在着脱节的现象。还有的文章过于广大，涉及到了内核，本文希望以通俗易懂的话去描述晦涩的词语，可能会和实际有一丢丢的出入，但是更易理解。我们都知道JS是单线程的，即js的代码只能在一个线程上运行，也就说，js同时只能执行一个js任务，但是为什么要这样呢？这与浏览器的用途有关，JS的主要用途是与用户互动和操作DOM。设想一段JS代码，分发到两个并行互不相关的线程上运行，一个线程在DOM上添加内容，另一个线程在删除DOM，那么会发生什么？以哪个为准？所以为了避免复杂性，JS从一开始就是单线程的，以后也不会变。这里我们已经知道了，一段JS代码只能在一个线程从上到下的执行，但是我们遇到setTimeout或者ajax异步时，也没有等待啊，往下看。2. 浏览器既然JS是单线程的，那么诸如onclick回调，setTimeout，Ajax这些都是怎么实现的呢？是因为浏览器或node（宿主环境）是多线程的，即浏览器搞了几个其他线程去辅助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，各自的线程都会保存着的，因为需要在未来执行啊。。。所以，这几个线程主要干两件事：
setTimeout(() => { console.log(1)}, 2000)setTimeout(() => { console.log(2)}, 3000)在一开始，消息队列是空的，在2秒后，一个 () => { console.log(1) } 的函数进入队列，在3秒后，一个 () => { console.log(2) }的函数进入队列，此时队列里有两个元素，主线程从队列头中挨个取出并执行。到这里我们就知道了，这3个东西大概的作用、关系和流程，但是，它们3个互相怎么交流的？这需要一个中介去专门去沟通它们3个，而这个中介，就是 EventLoop轮询处理线程既然叫轮询了，那么肯定是不断的循环的去交流和沟通
var a = 111;setTimeout(function() { console.log(222)}, 2000)fetch(url) // 假设该http请求花了3秒钟.then(function() { console.log(333)})dom.onclick = function() { // 假设用户在4秒钟时点击了dom console.log(444)}console.log(555)// 结果555222333444步骤1：
|
