目录
一、JavaScript为什么设计为单线程？
二、任务队列
👋🏻 扩展：异步队列里的宏任务与微任务
一、JavaScript为什么设计为单线程？
JavaScript语言的一大特点就是单线程，换言之就是同一个时间只能做一件事。
for(var j = 0; j < 100000; j++) {console.log(j);
}
console.log('end');
上面的代码，只有for循环执行完毕，才会执行end；
JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途就是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。
假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。
为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。
我们都知道，js是单线程，也就是说js在同一时间只能做一件事。多线程有很多优点，为啥js不能和java一样做成多线程呢，毕竟他们的名字那么像。这是因为js可以操作DOM，试想一下如果js有多线程，其中一个线程要删除一个div，而另一个线程要给这个div添加子元素时，那到底要听哪个线程的呢？
另外，虽然说像web worker等技术也赋予了js多线程的能力，但这种多线程还是有限制的，那就是不能操作DOM。一般来说，通常只是把一些比较复杂的计算放在web worker里。
二、任务队列
"任务队列"是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件；
我们来解释一下：
Javascript是单线程的，单线程就意味着所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
这样子就会引起一个很严重的问题，比方说有一个页面里有个点击事件，在用户点击后会执行一些逻辑，如果只有单线程的话，用户如果一直不点击的话，页面就被阻塞住了，什么操作都无法继续下去，这显然是不合理的。
如果排队是因为计算量太大，CPU占用高倒也情有可原，但是很多时候CPU是处于空闲状态或者有很大的空间未被使用，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），只能等结果出来，才可以往下执行。
JavaScript语言的设计者意识到，主线程完全可以不管IO设备，把这些等待中的任务挂起，先运行排在后面的任务。等到IO设备返回了结果，再去执行挂起的任务。
于是在JS中就使用了异步，添加了一个消息队列，将一些需要等待的事件放到消息队列里，先执行那些可以直接进行的操作，之后不停的去去问消息队列，有没有任务可以执行呀，有没有任务可以执行呀。如果有的话，就把需要执行的操作取出来放到主线程里执行，如果没有的话则继续之前的操作，这也就是JS的事件轮询。举个梨子，感受一下：👇
console.log('start')setTimeout(function() {console.log('setTimeout') }, 0)console.log('end')在上述的例子中两个console是同步代码，所以直接进入主线程的执行栈中执行，setTimeout是异步代码所以放到消息队列里。在执行栈中按照代码从上到下的执行顺序，打印 start => end。执行栈中的任务全部完成后，对消息队里进行轮询，由于定时器设定的时间为0，所以会在执行栈的任务清空后立即执行，所以上述例子的打印结果为start => end => setTimeout
因此，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
💠 所以，我们可以大致总结一下事件轮询的原理
js中任务分为同步任务和异步任务，同步任务是指进入主线程中排队执行的任务，异步任务指的是进入任务队列（事件队列）排队执行的任务，只有主线程中的任务执行完毕后才会调用任务队列的任务，并且遵循先进先出的原则，这也是js运行的机制，而这个过程不断循环被称为事件循环（event loop）
具体来说，异步执行的运行机制(异步执行机制或事件轮询机制)如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）
1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2. 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3. 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4. 主线程不断重复执行上面的第三步（第三步重复执行就是事件轮询的过程）。
只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复，这种机制就被称为事件循环（event loop）机制。
案例-1
for(var j = 0; j < 100000; j++) {console.log(j);setTimeout(function(){console.log('timeout');}, j);
}
console.log('end');上面的代码，for循环里面的j输出的时候，同时会把setTimeout（异步执行）放到任务队列中，等到循环体结束，继续执行主线程的其他代码块end，当主线程代码块执行完毕，才会按照规则（微任务、宏任务）执行任务队列中的代码。
案例-2
const useTime = t => { let start = Date.now() while(Date.now() - start < t) {}
}let timer1 = setTimeout(() => { console.log(3)
}, 500)let timer2 = setTimeout(() => {console.log(4)
}, 1000) console.log(1)
useTime(2000)
console.log(2)
在不清楚单线程模型时，或许以为这段代码的输出会是立即输出1，等待0.5秒后输出3，等待1秒后输出4，最后在第2秒输出2。那实际为何呢？
我们来验证一下：👇
在将代码放在网页调试区输入后，实际看到的结果为：
1. 先立即输出‘1’
2. 2秒后输出‘2’ ‘3’ ‘4’
案例-3
setTimeout(()=>{console.log(1)
}, 0)
console.log(2)立即输出‘2’‘1’
let t = true
setTimeout(() => {t = false
}, 1000)
while(t){ }
console.log('end')t不会变为false，代码死循环。
👋🏻 扩展：异步队列里的宏任务与微任务
先举个例子
console.log('script start')setTimeout(function(){console.log('setTimeOut')
}, 0)new Promise(function(resolve){console.log('promise1') resolve()
}).then(function(){console.log('promise2')
})console.log('script end')
根据上面所说的js的事件轮询机制很容易就可以判断出前面几个的打印结果script start => promise1 => script end（promise里的是同步代码，.then里的才是异步的），但是setTimeout里和.then的输出顺序就不好判断了。这里就要说说js事件轮询机制里的宏任务和微任务了。
JS将异步队列里的任务划分为宏任务和微任务
宏任务有：1) setTimeout，setInterval，setImmediate、2) I/O、3) UI rendering、4) 网络请求Ajax、5) script（整体代码）等
微任务有：1) process.nextTick(node)、2) Promise、3) Object.observe(已废弃)、4) MutationObserver(html5新特性)等
结合上述的事件轮询机制，执行过程如下：
1、所有任务都在主线程上执行，形成一个执行栈。
2、主线程发现有异步任务，如果是微任务就把他放到微任务的消息队列里，如果是宏任务就把他放到宏任务的消息队列里。
3、执行栈所有同步任务执行完毕。
4、执行微任务队列，之后再执行宏任务队列。
5、轮询第4步，即重复执行。
看过一些文章，也把同步任务，即script（整体代码）视为宏任务，这时的执行就是宏任务 => 微任务 => 宏任务 => 微任务…..的循环（其实对执行顺序而言并没有差异）
现在再来看看看上面例子的执行流程，如下：
1、打印script start，
2、遇到setTimeout放到宏任务队列里
3、打印promise1
4、将.then回调放入微任务队列里
5、打印script end
6、执行栈已清空，执行微任务队列打印promise2
7、微任务队列已清空，执行宏任务队列setTimeOut
8、所有任务队列清空
（如果还有任务的话则继续轮询 微任务 => 宏任务 => 微任务 => 宏任务…）
promise里的是同步代码，.then里的才是异步的
参考资料：
- 如何理解JS事件的轮询机制
- JS的事件轮询机制
- JS单线程、异步与轮询
- JS的事件循环(event loop)及微任务和宏任务
- JavaScript中的Event Loop(事件循环)机制
