单线程的JavaScript
说起异步，就要先说说JavaScript运行机制。我们知道，JavaScript是单线程执行的，意味着同一个时间点，只有一个任务在运行。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
从诞生起，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。
为什么需要异步？
单线程的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。
为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。
关于异步处理，现在已经有了许多好的解决方案。如果想全面了解如何处理异步，@肖鸡已经写了一篇非常全面的文章JS中异步的解决方案。
JavaScript执行机制
在谈异步之前，先来说说JavaScript的执行机制，看下面这段代码
function foo () {
return foo();
}
foo();
// Uncaught RangeError: Maximum call stack size exceeded
这代码里面抛出了一个错误，意思是超过最大调用堆栈大小，那么这个call stack是什么呢？
call stack：执行JavaScript的主线程分为heap和stack，stack是一个执行环境上下文。
stack是一种数据结构，数据先入后出，后入先出。执行JavaScript的call stack，也是如此。
stack
从上图的例子可以看出调用栈的变化
main(js文件可以视作一个main函数) -> printSquare(内部调用了square，因此需要把square推入栈中) -> square(内部调用了multiply，推入栈中) -> multiply
此时所依赖的函数都在栈中，那么可以执行了，执行顺序和栈是一致的，后入先出（执行），所以顺序为
multiply -> square -> printSquare。
call stack也是有最大限制的，可以使用下面的代码测试一下浏览器的最大call stack size
var i = 0;
function inc() {
i++;
inc();
}
inc();
//VM202:2 Uncaught RangeError: Maximum call stack size exceeded
i // 15720
理解JavaScript的函数调用方式，对于理解递归，高阶函数，异步函数等都是非常有帮助的。
以递归为例，递归函数不断调用自身，那么就会不断向call stack中推入函数，直到达到递归条件（此时函数不再调用自身），然后再按后进先出的原则依次执行stack中的函数。
异步的实现
异步的实现我分为三部分来理解：webApi，任务队列，event loop
webApi
先来列举一下JavaScript中的异步任务，现在先限定在浏览器中，可以得出以下结果：
-
dom事件
-
定时器setTimeout,setInterval
-
XMLHttpRequest
可以发现，这些都是都是浏览器的一些api，也就是webApi。其实异步的实现是浏览器来处理的，主线程并不用管异步时如何实现的。
事实上，浏览器是多进程的，所以可以开多个线程来处理异步行为，并在任务完成时同步到任务队列
任务队列
看下面这段代码，setTimeout指定的函数0ms后输出，但是最后才执行
console.log(1);
setTimeout(() => {console.log('after 0ms')} ,0);
console.log(2);
console.log(3);
// 1
// 2
// 3
// after 0ms
因为setTimeout的函数经过webApi，0ms后定时器执行并将回调函数放到task queue，当call stack中的代码执行完毕时，主进程不断查看task queue中的任务，如果有任务就取出并放到call stack中执行。
setTimeout的定时是不准确的，因为当前call stack执行任务时，定时器的回调就会一直在task queue中等待
event loop
对于其他的异步api，如dom事件，ajax请求等，都是同样的原理，当异步事件执行完毕，就会把相应的回调函数放到task queue中。
task queue中的任务需要反复轮询，查看是否有任务已完成，这个轮询就是event loop
Event loop
event loop经常用类似如下的方式来实现
while (queue.waitForMessage()) {
queue.processNextMessage();
}
如果当前没有任何消息queue.waitForMessage 会等待同步消息到达。
异步和回调的关系
说到现在，异步和回调的关系已经很明确了。
异步：通过webApi创建异步任务。任务完成时，如果有指定了回调函数，将回调函数放入task queue中；如果没有指定回调函数，这个事件就被丢弃。
回调函数：定义了异步任务完成时所要执行的操作，包括事件和定时器所指定的异步任务。
避免同步阻塞的代码
像深度循环，同步的ajax请求等任务会非常耗时，主线程有代码执行时，task queue中的代码就会一直处于等待状态，此时浏览器无法进行任何交互和操作，页面就相当于挂掉了。
网友评论