第2114期浏览器环境下的JavaScript Event Loop

Posted 2021-04-06 前端早读课

前言

老话题了。今日早读文章由作者@周雄投稿分享。

正文从这开始~~

什么是javascript的Event Loop？

在JavaScript中有一个很重要的Event Loop概念，从字面意思理解为事件循环，为什么会有Event Loop这个概念呢？我们得先从JavaScript语言的特征说起。

细心的读者可能发现了，文章的标题中我们着重强调了是在浏览器环境，这是为什么呢？

因为JavaScript的Event Loop不仅存在于浏览器环境下，还存在于Node环境下，而且两者还存在一些差别。

本篇文章是基于浏览器环境下对于JavaScript Event Loop的讲解。

JavaScript 的单线程

我们都知道JavaScript语言的一大特点就是单线程，这就意味着在同一个时间，只能做一件事情。

为什么JavaScript不做多线程处理呢？还能更加充分利用CPU呢。

这要从JavaScript的使用场景说起，JavaScript作为浏览器语言，主要用途是通过操作DOM，与用户进行互动。

我们设想一下，如果一个线程去更新某个DOM元素，而另一个线程去删除这个DOM元素，那么浏览器该执行哪个操作呢？

为了避免复杂的多线程机制，JavaScript从设计之初就选择了单线程标准，而且未来也不会发生变化。

你可能会问，Web Worker不是允许JavaScript来创建多线程吗？

这个是没错的，但是要注意的是，Web Worker创建的子线程是不能操作DOM的，操作DOM的任务需要交给主线程来执行，而且子线程完全受到主线程的控制，因此Web Worker的提出也并没有改变JavaScript单线程的本质。

既然JavaScript是单线程执行，那么这种运行机制的优点是什么吗？

最大的优点就是，在单线程中运行代码会相当轻松，因为你不用处理多线程环境中出现的一些复杂情况，比如死锁。

但是单线程同样会带来一些问题。当“执行栈”中需要运行耗费大量时间的函数时，例如DOM，AJAX，setTimeout等，由于单线程的机制，浏览器只能等待耗时代码的完成，而不能去做其它的事情，因为它被阻塞了，站在用户的角度，就是浏览器停止渲染，卡住了。

那么，聪明的JS是如何来解决这个问题的呢？

没错，采用异步回调函数的机制，Event Loop事件循环机制也就应运而生。

Event Loop的作用

在JavaScript引擎的主线程上，会包含一个执行栈，按照栈后进先出的顺序处理栈中的任务。

而在执行栈之外，会独立使用一个容器来专门管理异步状态，这个容器就是task queue （任务队列）。

所有异步操作的回调，都会暂时被塞入这个队列。Event Loop 处在两者之间，扮演一个调度者的角色，它会以一个固定的时间间隔不断轮询，当它发现执行栈空闲，就会去到 Task 队列里拿一个异步回调，把它塞入执行栈中执行，一段时间后，主线程执行完成，弹出上下文环境，再次空闲，Event Loop 又会执行同样的操作依次循环，于是构成了一套完整的事件循环运行机制。

microtask 和 macrotask

在任务队列中维护的任务虽然都会因为Event Loop而得到执行，但是不同类型的任务执行的时机是不一样的。

任务队列中的任务会被分为两种：微任务（microtask）和宏任务（macrotask）。

在这里我们可以简单概括下两种任务包含的基本操作。

· 宏任务包括 script脚本， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。

· 微任务包括 process.nextTick，Promise，MutationObserver，注意process.nextTick是在Node环境中具有的

执行顺序

通过下面这张图，我们来看看宏任务和微任务执行的顺序。

配合这张图，我们看看JavaScript代码的执行过程：

• 首先执行同步代码，即script脚本，这属于宏任务

• 当执行完所有同步代码后，执行栈清空

• 从微任务队列中逐个取出回调任务，放入执行栈中执行，直至所有微任务执行完成。注意：如果在执行微任务的过程中，产生了新的微任务，那么这个微任务会加入到队列的末尾，同样会在这个周期内被执行。

• 当执行完所有微任务后，如果有必要会开始渲染页面

• 开始下一轮 Event Loop，执行宏任务中的异步代码，也就是 setTimeout 中的回调函数。

实例验证

在学习完相关的理论知识后，我们通过一些代码实例来检验下大家对event loop的理解。

 
   
   
 

  
    
    
  
 console.log(1); 
  
    
    
  
 setTimeout(() => { 
  
    
    
  
 console.log(2); 
  
    
    
  
 Promise.resolve().then(() => { 
  
    
    
  
 console.log(3);
  
    
    
  
 }); 
  
    
    
  
 });
  
    
    
  
 new Promise((resolve, reject) => { 
  
    
    
  
 console.log(4); 
  
    
    
  
 resolve(5) 
  
    
    
  
 }).then((data) => { 
  
    
    
  
 console.log(data); 
  
    
    
  
 });
  
    
    
  
 setTimeout(() => { 
  
    
    
  
 console.log(6); 
  
    
    
  
 });
  
    
    
  
 console.log(7);
 
   
   
 

首先我们来看看这段代码的输出结果。

1->4->7->5->2->3->6

看看你答对了吗？

然后我们来看看代码的执行流程，包括执行栈Stack Queue，宏任务队列Macrotask Queue和微任务队列Microtask Queue的变化。

1、执行全局的script代码，第1行代码

此时Stack Queue：[console]

Macrotask Queue：[]，

Microtask Queue：[]

此阶段输出1。

2、执行到2-7行setTimeout代码，此时会将setTimeout的回调推入Macrotask Queue

此时Stack Queue：[setTimeout本身]

Macrotask Queue：[setTimeout callback]，

Microtask Queue：[]

此阶段没有输出。

3、执行8-13行Promise代码，在Promise构造函数内部的代码实际是同步代码，直到遇到resolve或者reject，才会触发异步的回调。

而Promise的异步任务回调会被推入到Microtask Queue。

此时Stack Queue：[Promise内的console]，

Macrotask Queue：[setTimeout callback1]，

Microtask Queue：[Promise callback]

此阶段输出4。

4、执行14-16行setTimeout代码，与上一个setTimeout一样，会被推入到Macrotask Queue

此时Stack Queue：[setTimeout本身]，

Macrotask Queue：[setTimeout callback1，setTimeout callback2]，

Microtask Queue：[Promise callback]

此阶段没有输出。

5、执行第17行代码，实际是同步代码，会进入到执行栈中。

此时Stack Queue：[console]，

Macrotask Queue：[setTimeout callback1，setTimeout callback2]，

Microtask Queue：[Promise callback1]

此阶段输出7。

6、至此第一轮的宏任务执行完成，开始从微任务队列中取出任务执行，直至微任务队列为空。

第10行代码resolve(5)执行后，会进入到then()方法内部，执行第12行代码。

此时Stack Queue：[Promise callback1]，

Macrotask Queue：[setTimeout callback1，setTimeout callback2]，

Microtask Queue：[]

此阶段输出5。

7、至此微任务队列清空，第一轮微任务也执行完成，开始下一轮event loop

8、执行setTimeout宏任务的回调，并将其推入到执行栈中。

此时Stack Queue：[setTimeout callback1]，

Macrotask Queue：[setTimeout callback2]，

Microtask Queue：[]

此阶段输出2。

但是在执行到第4行代码时，又生成了一个新的Promise，会将其推入到Microtask Queue中。

Microtask Queue：[promise callback2]。

9、宏任务执行完成后，开始从微任务队列中取出任务执行，即第5行代码

此时Stack Queue：[promise callback2]，

Macrotask Queue：[setTimeout callback2]，

Microtask Queue：[]

此阶段输出3。

10、第二轮任务轮询结束，开始第三轮event loop

11、执行第二个setTimeout任务回调，即第15行代码。

此时Stack Queue：[setTimeout callback2]，

Macrotask Queue：[]，

Microtask Queue：[]

此阶段输出6。

12、至此全部执行完成，Stack Queue，Macrotask Queue，Microtask Queue均为空。

关于宏任务和微任务中的setTimeout和Promise，我们再增加一些更加容易让人理解的解释。

setTimeout的作用是等待给定的时间后为它的回调产生一个新的宏任务，这个宏任务将在下一轮循环中执行，而Promise的回调是在当前轮循环中产生，并推入到当前循环的微任务队列中。

这就是为什么打印'2'在'5'之后。因为打印'5'是第一轮微任务里做的事情，而打印'2'是在第二轮的宏任务里做的事情。

通过上面的整体讲述，相信大家对event loop的过程已经有了深入的了解。

下面再给大家留一道题目，看看大家能不能答对，这其中增加了async-await关键字。

 
   
   
 

  
    
    
  
console.log('script start');
  
    
    
  


  
    
    
  
async function async1() {
  
    
    
  
 await async2();
  
    
    
  
 console.log('async1 end')
  
    
    
  
}
  
    
    
  


  
    
    
  
async function async2() {
  
    
    
  
 console.log('async2 end');
  
    
    
  
}
  
    
    
  


  
    
    
  
async1();
  
    
    
  


  
    
    
  
setTimeout(function() {
  
    
    
  
 console.log('setTimeout');
  
    
    
  
}, 0);
  
    
    
  


  
    
    
  
new Promise(resolve => {
  
    
    
  
 console.log('Promise');
  
    
    
  
 resolve();
  
    
    
  
})
  
    
    
  
 .then(function() {
  
    
    
  
 console.log('promise1');
  
    
    
  
 })
  
    
    
  


  
    
    
  
 .then(function() {
  
    
    
  
 console.log('promise2');
  
    
    
  
 });
  
    
    
  


  
    
    
  
console.log('script end');
 
   
   
 

在这里也给出参考答案吧，看看你答对了没？

 
   
   
 

  
    
    
  
script start -> async2 end -> Promise -> script end -> async1 end-> promise1 -> promise2 -> setTimeout
 
   
   
 

这里给大家一个提示，await在执行async函数时是会有阻塞性的，所以'async2 end'会出现在'Promise'之前。

为你推荐

欢迎自荐投稿，前端早读课等你来

在《javascript重难点实例精讲》这本书里，都是形如这种方式的内容讲解，不仅包含理论知识的描述，还会通过丰富的实例来做验证，详细讲解各种代码的执行过程，还会适当的留一些题目给你当练习，让你真正从原理上去学会它。