一、为什么JavaScript是单线程？
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？
JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。
所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。
为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。
二、理解任务队列
js 是一门单线程语言，这就意味着所有任务都需要排队，前一个任务结束，后一个任务才会开始。所以就有了 同步任务 和 异步任务。
同步任务指的是，在主线程上排队执行的任务，前一个任务结束，才会开始执行下一个任务；
异步任务指的是，不进入主线程，而进入一个“任务队列”，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行，而且可以执行多个任务，不会造成阻塞。
三、理解事件循环 Event Loop
1、异步执行的运行机制如下：
- 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
- 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
- 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。
四、宏任务和微任务
1、宏任务（macrotask ）和微任务（microtask ）
**宏任务：setTimeout、setInterval、setImmediate**
**微任务：Promise.then 、 nextTick**
macrotask 和 microtask 表示异步任务的两种分类。
2、运行顺序
在挂起任务时，JS 引擎会将所有任务按照类别分到这两个队列中，首先在 macrotask 的队列（这个队列也被叫做 task queue）中取出第一个任务，执行完毕后取出 microtask 队列中的所有任务顺序执行；之后再取 macrotask 任务，周而复始，直至两个队列的任务都取完。
-
同步任务在主线程执行，顺序执行代码
-
遇到异步任务则被放进任务队列等待执行 (放进去的是异步任务的回调函数)
-
主线程同步任务执行完成后, 会去任务队列拿异步任务放进主线程执行
-
对于延时任务, 需要到了规定时间, 才能进入主线程
-
执行完, 会再去任务队列, 看还有没有异步任务要执行, 重复上面
3、示例
3.1示例一
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});
console.log('script end');
结果：
script start --> script end--> promise1--> promise2--> setTimeout
对应的处理过程则是：
- 执行 console.log （输出 script start）
- 遇到 setTimeout 加入外部队列
- 遇到两个 Promise 的 then 加入内部队列
- 遇到 console.log 直接执行（输出 script end）
- 内部队列中的任务挨个执行完 （输出 promise1 和 promise2）
- 外部队列中的任务执行 （输出 setTimeout）
3.2示例二
setTimeout(()=>{
console.log('timer1');
Promise.resolve().then(function() {
console.log('promise1');
});
});
setTimeout(()=>{
console.log('timer2');
Promise.resolve().then(function() {
console.log('promise2');
});
});
浏览器端执行的结果是： timer1 -> promise1 -> timer2 -> promise2
3.3示例三
setTimeout(() => {
console.log('定时器');
}, 0)
new Promise((resolve) => {
console.log('同步代码')
resolve('异步代码')
}).then((res) => {
console.log(res);
})
console.log('奥特曼');
执行的结果是： 同步代码 -> 奥特曼 -> 异步代码 -> 定时器
