对 JavaScript 中事件循环的理解​

马丁路德 等级 811 1 1

一、是什么

JavaScript 在设计之初便是单线程,即指程序运行时,只有一个线程存在,同一时间只能做一件事

为什么要这么设计,跟JavaScript的应用场景有关

JavaScript 初期作为一门浏览器脚本语言,通常用于操作 DOM ,如果是多线程,一个线程进行了删除 DOM ,另一个添加 DOM,此时浏览器该如何处理?

为了解决单线程运行阻塞问题,JavaScript用到了计算机系统的一种运行机制,这种机制就叫做事件循环(Event Loop)

事件循环(Event Loop)

JavaScript中,所有的任务都可以分为

  • 同步任务:立即执行的任务,同步任务一般会直接进入到主线程中执行

  • 异步任务:异步执行的任务,比如ajax网络请求,setTimeout定时函数等

同步任务与异步任务的运行流程图如下:

对 JavaScript 中事件循环的理解​

从上面我们可以看到,同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。上述过程的不断重复就是事件循环

二、宏任务与微任务

如果将任务划分为同步任务和异步任务并不是那么的准确,举个例子:

console.log(1)  

setTimeout(()=>{  
    console.log(2)  
}, 0)  

new Promise((resolve, reject)=>{  
    console.log('new Promise')  
    resolve()  
}).then(()=>{  
    console.log('then')  
})  

console.log(3)  

如果按照上面流程图来分析代码,我们会得到下面的执行步骤:

  • console.log(1),同步任务,主线程中执行

  • setTimeout() ,异步任务,放到 Event Table,0 毫秒后console.log(2)回调推入 Event Queue

  • new Promise ,同步任务,主线程直接执行

  • .then ,异步任务,放到 Event Table

  • console.log(3),同步任务,主线程执行

所以按照分析,它的结果应该是 1 => 'new Promise' => 3 => 2 => 'then'

但是实际结果是:1=>'new Promise'=> 3 => 'then' => 2

出现分歧的原因在于异步任务执行顺序,事件队列其实是一个“先进先出”的数据结构,排在前面的事件会优先被主线程读取

例子中 setTimeout回调事件是先进入队列中的,按理说应该先于 .then 中的执行,但是结果却偏偏相反

原因在于异步任务还可以细分为微任务与宏任务

微任务

一个需要异步执行的函数,执行时机是在主函数执行结束之后、当前宏任务结束之前

常见的微任务有:

  • Promise.then

  • MutaionObserver

  • Object.observe(已废弃;Proxy 对象替代)

  • process.nextTick(Node.js)

宏任务

宏任务的时间粒度比较大,执行的时间间隔是不能精确控制的,对一些高实时性的需求就不太符合

常见的宏任务有:

  • script (可以理解为外层同步代码)

  • setTimeout/setInterval

  • UI rendering/UI事件

  • postMessage、MessageChannel

  • setImmediate、I/O(Node.js)

这时候,事件循环,宏任务,微任务的关系如图所示

对 JavaScript 中事件循环的理解​

按照这个流程,它的执行机制是:

  • 执行一个宏任务,如果遇到微任务就将它放到微任务的事件队列中

  • 当前宏任务执行完成后,会查看微任务的事件队列,然后将里面的所有微任务依次执行完

回到上面的题目

console.log(1)  
setTimeout(()=>{  
    console.log(2)  
}, 0)  
new Promise((resolve, reject)=>{  
    console.log('new Promise')  
    resolve()  
}).then(()=>{  
    console.log('then')  
})  
console.log(3)  

流程如下

// 遇到 console.log(1) ,直接打印 1  
// 遇到定时器,属于新的宏任务,留着后面执行  
// 遇到 new Promise,这个是直接执行的,打印 'new Promise'  
// .then 属于微任务,放入微任务队列,后面再执行  
// 遇到 console.log(3) 直接打印 3  
// 好了本轮宏任务执行完毕,现在去微任务列表查看是否有微任务,发现 .then 的回调,执行它,打印 'then'  
// 当一次宏任务执行完,再去执行新的宏任务,这里就剩一个定时器的宏任务了,执行它,打印 2  

三、async与await

async 是异步的意思,await则可以理解为等待

放到一起可以理解async就是用来声明一个异步方法,而 await是用来等待异步方法执行

async

async函数返回一个promise对象,下面两种方法是等效的

function f() {  
    return Promise.resolve('TEST');  
}  

// asyncF is equivalent to f!  
async function asyncF() {  
    return 'TEST';  
}  

await

正常情况下,await命令后面是一个 Promise对象,返回该对象的结果。如果不是 Promise对象,就直接返回对应的值

async function f(){  
    // 等同于  
    // return 123  
    return await 123  
}  
f().then(v => console.log(v)) // 123  

不管await后面跟着的是什么,await都会阻塞后面的代码

async function fn1 (){  
    console.log(1)  
    await fn2()  
    console.log(2) // 阻塞  
}  

async function fn2 (){  
    console.log('fn2')  
}  

fn1()  
console.log(3)  

上面的例子中,await 会阻塞下面的代码(即加入微任务队列),先执行 async外面的同步代码,同步代码执行完,再回到 async 函数中,再执行之前阻塞的代码

所以上述输出结果为:1fn232

四、流程分析

通过对上面的了解,我们对JavaScript对各种场景的执行顺序有了大致的了解

这里直接上代码:

async function async1() {  
    console.log('async1 start')  
    await async2()  
    console.log('async1 end')  
}  
async function async2() {  
    console.log('async2')  
}  
console.log('script start')  
setTimeout(function () {  
    console.log('settimeout')  
})  
async1()  
new Promise(function (resolve) {  
    console.log('promise1')  
    resolve()  
}).then(function () {  
    console.log('promise2')  
})  
console.log('script end')  

分析过程:

  1. 执行整段代码,遇到 console.log('script start') 直接打印结果,输出 script start

  2. 遇到定时器了,它是宏任务,先放着不执行

  3. 遇到 async1(),执行 async1 函数,先打印 async1 start,下面遇到await怎么办?先执行 async2,打印 async2,然后阻塞下面代码(即加入微任务列表),跳出去执行同步代码

  4. 跳到 new Promise 这里,直接执行,打印 promise1,下面遇到 .then(),它是微任务,放到微任务列表等待执行

  5. 最后一行直接打印 script end,现在同步代码执行完了,开始执行微任务,即 await下面的代码,打印 async1 end

  6. 继续执行下一个微任务,即执行 then 的回调,打印 promise2

  7. 上一个宏任务所有事都做完了,开始下一个宏任务,就是定时器,打印 settimeout

所以最后的结果是:script startasync1 startasync2promise1script endasync1 endpromise2settimeout

收藏
评论区

相关推荐

对 JavaScript 中事件循环的理解​
一、是什么 JavaScript 在设计之初便是单线程,即指程序运行时,只有一个线程存在,同一时间只能做一件事 为什么要这么设计,跟JavaScript的应用场景有关 JavaScript 初期作为一门浏览器脚本语言,通常用于操作 DOM ,如果是多线程,一个线程进行了删除 DOM ,另一个添加 DOM,此时浏览器该如何处理? 为了解决单
JavaScript 和 Node.js 中事件循环
1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章,讲解的很好。JavaScript中事件循环,主要就在理解宏任务和微任务这两种异步任务。宏任务(macrotask): setTimeOut 、 setInterval 、 setImmediate 、 I/O 、 各种callback、 UI渲染 、messageCh
一篇文章带你了解JavaScript作用域
在JavaScript中,对象和函数也是变量。在JavaScript中,作用域是你可以访问的变量、对象和函数的集合。JavaScript 有函数作用域: 这个作用域在函数内变化。一、本地JavaScript变量一个变量声明在JavaScript函数内部,成为函数的局部变量。局部变量有局部作用域: 它们只能在函数中访问。JS://code here can n
JS 面相对象编程
提起面向对象我们就能想到类,对象,封装,继承,多态。在《javaScript高级程序设计》(人民邮电出版社,曹力、张欣译。英文名字是:Professional JavaScript for Web Developers)这本书中描述的还算比较详细。我们看看JavaScript中定义类的各种方法。 1.工厂方式 javaScript中创建自己的类和对象,我们应
JS篇(004)
答案: 1.**脚本语言**。JavaScript 是一种解释型的脚本语言,C、C++等语言先编译后执行,而 JavaScript 是在程序的运行过程中逐行进行解释。 2.**基于对象**。JavaScript 是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。 3.**简单**。JavaScript 语言中采用的是弱类型的变量
GitHub上的7个热门TypeScript项目,要不要学一下呢?
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程)由微软开发的自由和开源的编程语言。设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。 **语言特性** -------- TypeScript 是一种
JavaScript中的endsWith
### 问题: _How can I check if a string ends with a particular character in JavaScript?_ **如何在JavaScript中检查字符串是否以特定字符结尾?** _Example: I have a string_ **示例:我有一个字符串** var str = "
JavaScript基础系列
![JavaScript基础系列](https://oscimg.oschina.net/oscnet/c1dc2f84f95d13105d79ba82a648f0c5eab.png) > JavaScript基础系列 ![image.png](https://oscimg.oschina.net/oscnet/e16bf4232aab0acb21c56
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
JavaScript的入门简介
#### 什么是 JavaScript JavaScript,我们一般简称为 JS,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。 JavaScript 现在已经被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并支持面向对象、命令式和声明式风格。 HTML、CSS、JavaScript三者不同的功能:
JavaScript零基础入门——(一)什么是JavaScript
JavaScript零基础入门——(一)什么是JavaScript ================================= 写在前面: 『Hello,大家好,我是振丹!从这节课开始,我会慢慢的带大家学习JavaScript的基础,至于进阶部分,有机会我也会专门开专题来讲。有做后端同学会说,现在微软的TypeScript开始火起来了,连Angu
Javascript解析机制 执行机制
HTML5学堂:在学习JavaScript过程中,我们需要了解事件的机制是怎么执行的?本文将会提到JavaScript事件机制的解析,希望对大家有帮助! javascript解析的过程主要分为两个阶段,分别是编译与执行阶段。 在编译期,javascript解释器将完成对javascript代码的预处理,即将javascript代码转换为字节码。 在执行
TypeScript 教程
TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发。\[1\] TypeScript扩展了JavaScript的句法,所以任何现有的JavaScript程序可以不
TypeScript快速入门
TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript。 TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。 TypeScript是微软开源的,它有这强大的技术后盾。 ![](https://oscimg.oschina.net/oscnet/3b63ac2b-6b7f-4c49-
Typescript 和 Javascript之间的区别
JavaScript 和 TypeScript 的概要介绍 ============================= **JavaScript** -------------- JavaScript 是一种轻量级的解释性脚本语言,可嵌入到 HTML 页面中,在浏览器端执行,能够实现浏览器端丰富的交互功能,为用户带来流畅多样的用户体验。 JavaScr