理解JS的异步操作--Event Loop

参考链接

JavaScript是一个单线程的编程语言，这意味着它在同一个事件内只能做一件事

• 好处：你不必考虑并发、多线程的问题，这会让代码更加简洁
• 坏处：你在进行一些耗时长的操作（读取文件、网络通讯等）时，会阻塞整个程序

为了不引入多线程的概念，同时又能提高程序的效率，JS引入了异步的概念，具体如下

• callbacks
• promises
• async/await

虽然JS是单线程的，但是他的宿主环境（nodej、浏览器等）是多线程的。异步操作基本原理，就是让宿主环境开启一些副线程，来执行异步操作，等到这个异步操作完成后，由主线程来执行回调函数。

JS的同步操作是如何工作的？

const second = () => {
  console.log('Hello there!');
}
const first = () => {
  console.log('Hi there!');
  second();
  console.log('The End');
}
first()

我们来从JS引擎的角度来看看上述代码是如何工作的。

执行上下文（Execution Context）

执行上下文是一个抽象的概念，它表示JS代码会在哪里被执行

• 一个函数中的代码会在这个函数执行上下文中被执行
• 全局环境下的代码会在全局执行上下文中被执行
• 每一个函数都有自己的执行上下文

调用栈（call stack)

我们知道栈是一种先进后出的结构。JS代码在执行中，会把所有的函数调用依次压如栈中。
下图表示上述代码执行过程中出栈入栈的情况。

我们看看到底发生了什么

• 首先，全局上下文（用main()表示）被压入栈中
• 当执行first()时，这个执行上下文被压入栈
• console.log('Hi there!') 被压入栈
• 当console.log('Hi there!')执行完这回，它被弹出栈
  。。。
  。。。

上述就是同步代码的执行过程，接下来我们进入主题

JS异步操作是如何工作的？

考虑这样的代码

const processImage = (image) => {
  /**
  * doing some operations on image
  **/
  console.log('Image processed');
}
const networkRequest = (url) => {
  /**
  * requesting network resource
  **/
  return someData;
}
const greeting = () => {
  console.log('Hello World');
}
processImage(logo.jpg);
networkRequest('www.somerandomurl.com');
greeting();

假设processImge()是通过网络请求一个图片，我们知道网络读取的速度远远慢于CPU的运行速度。那么我们在执行 processImge()时，CPU就会闲置，程序就会阻塞在这里。

JS的异步操作的核心思想就是把诸如文件读取、网络IO的操作，交给副线程（对于JS程序员不可见），来避免主线程被堵塞。

参考这段代码

const networkRequest = () => {
  setTimeout(() => {
    console.log('Async Code');
  }, 2000);
};
console.log('Hello World');
networkRequest();
console.log('Hi')

它的执行过程是：

• 执行所有同步代码

  • 执行console.log('Hello World')
  • 执行networkRequest()
  • 执行setTimeOut() -- 执行到这一步后，宿主环境开启一个副线程，来执行这个异步操作
  • 执行console.log('Hi')

• 执行完同步代码后，JS主线程开始不断的检查事件循环队列
  队列，看看有没有异步操作完成

• 2000毫秒后，setTimeOut() 完成，它的回调函数被推入事件循环队列

• 此时主线程依旧在循环检查事件循环队列，突然发现有了新的回调函数

• 主线程将这个回调函数压入调用栈，开始执行

• 调用栈的代码执行完之后，JS再一次开始循环检查事件循环队列

• 。。。。。