JavaScript 的核心机制——event loop(最易懂版)
前言
javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。
非阻塞就是当代码需要进行一项异步任务(无法立刻返回结果,需要花一定时间才能返回的任务,如ajax事件)时,主线程会挂起(pending)这个任务,然后在异步任务返回结果的时候再去执行相应的回调。
javascript引擎到底是如何实现的这一点呢?
1.执行栈
存放当前正在执行的代码的地方被称为执行栈。
当我们调用一个方法的时候,js会生成一个与这个方法对应的执行环境(context),又叫执行上下文。这个context存放着这个方法的私有作用域,上层作用域的指向,方法的参数,这个作用域中定义的变量以及这个作用域的this对象。
- 当一个脚本第一次执行的时候,js引擎会解析这段代码,并将其中的同步代码按照执行顺序加入栈中,然后从头开始执行。
- 如果当前执行的是一个方法,那么js会向执行栈中添加这个方法的context,然后进入这个context继续执行其中的代码。
- 当这个context中的代码 执行完毕并返回结果后,js会退出这个context并把这个context销毁,回到上一个方法的context。(函数的相互调用,就像一个栈!)
- 这个过程反复进行,直到执行栈中的代码全部执行完毕。
这个过程可以是无限进行下去的,除非发生了栈溢出,即超过了所能使用内存的最大值。
2.事件循环队列
- 执行栈遇到一个异步任务后(如ajax请求)并不会一直等待其执行完毕,而是继续执行 栈中的后续任务,这就是js的异步非阻塞特性。
- 当一个异步事件完成后,js会将这个事件的回调任务放入事件队列中,而不会影响当前的执行栈。
- 当前执行栈中的所有任务都执行完毕时,事件队列中如果有任务的话,主线程会从中取出最优先的任务,放入执行栈中执行。
- 如此反复,每次执行栈执行完毕,就去任务队列中查找,这样就形成了一个无限的循环;这就是所谓的 event loop 。
- 注意:当所有任务都执行完了(事件队列中也没有任务了),js的运行也不会停止。js宿主(浏览器)每一帧都会执行一次上述的过程,从而保证异步回调会快速响应。可以参见浏览器的requestIdleCallback 或 requestAnimationFrame !
这就是“事件循环(Event Loop)”
经典示例:
setTimeout(() => { console.log('settimeout') }, 0) let start = Date.now(); while (Date.now() - start < 2000); console.log('finished'); /** * 运行上面代码,并理解这个过程: * 执行栈中同步任务先运行2s的循环,然后输出 finished * 然后取出异步任务执行,输出settimeout
*/
3.异步任务的顺序
不同的异步任务是放在不同的队列里的,当多个队列同时存在待处理的任务时,异步任务之间的执行优先级也有区别!
总体有两种异步任务—— 微观任务(micro task)和宏观任务(macro task)。微观任务总是先于宏观任务被执行!
微观任务是 js引擎自己发出的异步任务,如Promise。 es2015之前,js引擎是无法自己创建异步任务的,所以微观任务是es2015才开始有的概念。
宏观任务是 宿主发起的异步任务,如setTimeout,XMLHttpRequest等 都是宿主window上的对象。
回到上一节,事件循环的第3点:主线程会去查找事件队列是否有任务! 是先取微观任务队列中的任务,直到微观任务队列为空,再找宏观任务队列。
经典示例:
setTimeout(() => { console.log('settimeout') //宏观异步任务,最后输出 }, 0) Promise.resolve().then(()=>{ console.log('promise') //微观异步任务,第二个输出 }) console.log('finished') // 同步的,最先输出
异步任务优先级 总体上是这样的顺序,如果要更细节的优先级呢?
微观任务优先级
微观任务目前只有一种,就是Promise创建的,而且微观任务队列只有一个,再加上js是单线程的,即便有多种也很好理解。
Promise.resolve().then(() => { Promise.resolve().then(() => { Promise.resolve().then(() => { console.log('1-1-1') }); console.log('1-1') }); console.log('1') }); Promise.resolve().then(() => { Promise.resolve().then(() => { console.log('2-1') }); console.log('2') }); // 依次输出: 1 2 1-1 2-1 1-1-1
宏观任务优先级
宏观任务有多种,而且是宿主发起(通常是多线程)又该如何确定顺序呢?
setTimeout(() => { console.log('timmer') }, 0); let start = Date.now(); while (Date.now() - start < 5000); function clickDiv(){ //点击按钮时触发 console.log('click') }
上面代码很有意思,主线程的同步代码执行需要5s,如果用户在第2s点击了按钮,那么5s后 是先输出 click,还是先输出 timmer 呢?
timmer事件和UI事件,是不同的事件队列,尽管他们都是宏观任务。他们的优先级交给浏览器来决定的 —— 具体宏观任务的优先级,是由具体宿主自己决定的!
所以这个问题请参考具体的宿主资料吧(nodejs 和 浏览器)