JavaScript异步编程的原理

2024-04-07 13:36:38

1 想说的话

JavaScript异步编程是前端面试中一个重要内容。为了加深我对此部分内容的印象，故写此博客，主要介绍JS异步编程的运行原理。

pre
```
栈队列
```

2 正文

本文主要是阐述下面这张图的内容。一图胜千言啊。

和C语言类似，JS也有执行栈（execution stack）。执行栈内存储执行上下文（execution context），execution context也被译作执行环境。执行环境一般分为全局环境和函数执行环境。

过程如下：

1 在执行栈中，上面执行环境的代码先执行，执行环境的代码执行完后，该执行环境从执行栈中弹出。

2 执行环境执行代码遇到异步代码块时，会通知JS宿主环境线程。

3 当事件触发时，将一个事件消息推入消息队列。（队列是先进先出。）注意：这时候不是立即执行，要等到当前Event Loop（事件循环）的代码执行完。（一次事件循环流转一次，被称为一次tick。）

这个必须搞清楚，以下面代码为例：

var index;
for (index = 0; index < 5; index++) {setTimeout(() => {console.log(index)}, 0)
}

结果是：

我们可以看到，即使定时器时间为0，定时器的回调函数也等到循环结束才会执行，那时候index等于5，所以打印5个5。

4 当前tick中的代码完后，消息队列会出对一个消息。现在执行栈的线程的状态是空闲的，所以出队的消息被该线程拉取。然后，事件消息绑定的回调函数（也就是异步任务）会像同步任务一样被推入执行栈。

5 继续过程1-4，直到消息队列为空。当然JS宿主环境线程是一直在跑的，因为要监听用户的触发事件的行文。

3 小结

以上就是JS异步编程的运行原理。

JS异步编程的实现主要有3种方式：回调函数，订阅发布模式，ES6的Promise。读者可以自行学习。

本文的图来自于：JavaScript异步编程,这篇作者的博客有异步编程的详细内容。

我自己也画了张图，以此加深印象。

JavaScript异步编程的原理相关推荐

Javascript异步编程之一异步原理
本系列的例子主要针对node.js环境,但浏览器端的原理应该也是类似的. 本人也是Javascript新手,把自己这段时间学习积累的要点总结下来,希望可以对同样在学习Javascript/node.j ...
JavaScript异步编程原理
众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...
写给初学者的JavaScript异步编程和背后思想
导读: 对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了 ...
网页javascript加载不出_写给初学者的JavaScript异步编程和背后思想
导读:对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了呢 ...
JavaScript 异步编程--Generator函数、async、await
JavaScript 异步编程–Generator函数 Generator(生成器)是ES6标准引入的新的数据类型,其最大的特点就是可以交出函数的执行的控制权,即:通过yield关键字标明需要暂停的语 ...
Atitit. Async await 优缺点异步编程的原理and实现 java c# php
Atitit. Async await 优缺点异步编程的原理and实现 java c# php 1. async & await的来源1 2. 异步编程history1 2.1. 线程池 2 ...
JavaScript异步编程【下】 -- Generator、Async/await
文章内容输出来源:拉勾教育大前端高薪训练营前言在JavaScript异步编程[上]和 JavaScript异步编程[中]中,我们已经讲到了处理异步编程的两种方法:回调函数和 Promise. ...
JavaScript异步编程【上】 -- 同步和异步、事件循环（EventLoop）、微任务和宏任务、回调函数
文章内容输出来源:拉勾教育大前端高薪训练营前言在我们学习JavaScript中,我们知道,JavaScript的执行环境是单线程的.所谓单线程是指一次只能完成一个任务,如果有多个任务,就必须排队 ...
【学习笔记】Part1·JavaScript·深度剖析-函数式编程与 JS 异步编程、手写 Promise（二、JavaScript 异步编程）
[学习笔记]Part1·JavaScript·深度剖析-函数式编程与 JS 异步编程.手写 Promise(课前准备) [学习笔记]Part1·JavaScript·深度剖析-函数式编程与 JS 异步 ...

最新文章

热门文章