JS的执行机制

我们先从下面的几个问题来开始我们的解答。

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执行机制就弄清楚了。

推荐阅读更多精彩内容