我们先从下面的几个问题来开始我们的解答。
1.1JavaScript为什么是单线程的？
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。
1.2JavaScript为什么需要异步？
如果JavaScript中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验。所以，JavaScript中存在异步执行。
1.3JavaScript单线程又是如何实现异步的呢?
是通过事件循环(event loop)来实现的异步，理解了事件循环(event loop)，也就理解了JavaScript的执行机制。
2.JavaScript中的事件循环(event loop)
下面我们通过几个例子来了解事件循环(event loop)。
例1：观察它的执行顺序：
console.log('1');
setTimeout(function(){
console.log('2')
},0);
console.log('3');
运行结果：‘1’，‘3’，‘2’
也就是说,setTimeout里的函数并没有立即执行,而是延迟了一段时间,满足一定条件后,才去执行的,这类代码,我们叫做异步代码。
所以,这里我们首先知道了JS里的一种分类方式,就是将任务分为: 同步任务和异步任务。
按照这种分类方式，JavaScript的执行机制是：
1.首先判断js事件是同步还是异步，同步就进入主线程，异步就进入执行栈；
2.异步任务在执行栈中注册函数，当满足触发条件时，就被推入事件队列；
3.同步任务进入主线程后一直执行，直到主线程空闲时，才会去事件队列中查看是否有可执行的异步任务，如果有就推入主进程中；
4.主线程不断重复上面三步。
所以例1的执行顺序就是：
- console.log(1) 是同步任务,放入主线程里
- setTimeout() 是异步任务,被放入event table, 0秒之后被推入event queue里
- console.log(3)是同步任务,放到主线程里
当 1、 3在控制条被打印后,主线程去event queue(事件队列)里查看是否有可执行的函数,执行setTimeout里的函数。
直到我遇到了下面的代码，我对上面的执行机制产生了怀疑，我们一起来看看下面的着短代码。
例2：
setTimeout(function(){
console.log('定时器开始啦');
})
new Promise(function(resolve){
console.log('马上执行for循环');
for(let i = 0; i < 1000; i++){
i == 99 && resolve();
}
}).then(function(){
console.log('执行then函数啦');
})
console.log('代码执行结束');
尝试按照,上文我们刚学到的JS执行机制去分析
- setTimeout 是异步任务,被放到event table
- new Promise 是同步任务,被放到主进程里,直接执行打印 console.log('马上执行for循环啦')
- .then里的函数是 异步任务,被放到event table
- console.log('代码执行结束')是同步代码,被放到主进程里,直接执行
所以,结果是 【马上执行for循环啦 --- 代码执行结束 --- 定时器开始啦 --- 执行then函数啦】吗?
亲自执行后,结果居然不是这样,而是【马上执行for循环啦 --- 代码执行结束 --- 执行then函数啦 --- 定时器开始啦】
那么,难道是异步任务的执行顺序,不是前后顺序,而是另有规定? 事实上,按照异步和同步的划分方式,并不准确。
而准确的划分方式是:
- macro-task(宏任务)：包括整体代码
script，setTimeout，setInterval - micro-task(微任务)：
Promise，process.nextTick
按照这种分类方式:JS的执行机制是
1.执行一个宏任务,过程中如果遇到微任务,就将其放到微任务的【事件队列】里
2.当前宏任务执行完成后,会查看微任务的【事件队列】,并将里面全部的微任务依次执行完
重复以上2步骤,结合两种事件循环 ,就是更为准确的JS执行机制了。
尝试按照刚学的执行机制,去分析例2:
- 首先执行script下的宏任务,遇到setTimeout,将其放到宏任务的【队列】里
- 遇到 new Promise直接执行,打印"马上执行for循环啦"
- 遇到then方法,是微任务,将其放到微任务的【队列里】
- 打印 "代码执行结束"
- 本轮宏任务执行完毕,查看本轮的微任务,发现有一个then方法里的函数, 打印"执行then函数啦"
- 到此,本轮的event loop 全部完成。
- 下一轮的循环里,先执行一个宏任务,发现宏任务的【队列】里有一个 setTimeout里的函数,执行打印"定时器开始啦"
所以最后的执行顺序是【马上执行for循环啦 --- 代码执行结束 --- 执行then函数啦 --- 定时器开始啦】
好了，到这里我们的js执行机制就弄清楚了。
