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再一次开始循环检查事件循环队列
。。。。。
