深入浅出JavaScript异步编程

随着移动互联网基础网速的飞速提升和各种设备硬件的革命性升级，人们对web应用功能的期待越来越高，浏览器性能因浏览器内核的革命性升级得到飞速提升，受浏览器性能制约的前端技术也迎来飞速发展。正如Atwood定律所言：“凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。”的确，现在的前端技术涉足领域广泛，有web应用开发、服务端开发、PC桌面程序开发、移动APP开发、IDE开发、CLI工具开发及工程化流程工具开发等。但随着前端技术日新月异的发展，JavaScript中的异步编程弊病问题也越来越明显地暴露出来，异步编程问题的解决方案也在快速的迭代优化。

本文将为大家解答以下疑问：什么是异步编程？为什么浏览器下会有异步编程？异步回调有哪些问题？如何解决异步回调问题？浏览器支撑的新方案的原理？

1.什么是异步编程

异步和同步对应，异步编程即处理异步逻辑的代码，JavaScript中最原始的就是使用回调函数。所以，我们只要理清同步回调和异步回调的区别，就可以理解什么是异步编程了。

请先看同步回调示例：

执行顺序2、1、3，先输出1后输出3，可见，同步回调：回调函数callback是在主函数dowork返回之前执行的。

再看异步回调示例：

先输出3后输出1，可见，异步回调：回调函数并没有在主函数内部被调用，而是在主函数外部执行,主函数返回后才执行。

2. 为什么浏览器下有异步编程

Chrome下的异步编程模型，如下图：

浏览器渲染进程中的渲染流水线主线程是单线程的，主线程发起耗时任务，交给其他进程执行，等处理完后，会将该任务添加到渲染进程的消息队列中，并排队等待循环系统的处理。排队结束之后，循环系统会取出消息队列中的任务进行处理，触发相关的回调操作，并将任务交给另一个进程去处理，这时页面主线程会继续执行消息队列中的任务。

浏览器设计时，最初选择了单线程架构，结合事件循环和消息队列的实现方式，我们在JavaScript开发中，也会经常遇到异步回调。

而异步回调，影响了我们的编码方式，我们必须直面异步回调中的一些问题。

3. 异步回调有什么问题

如果我们一直选择使用异步回调编写代码，当面临复杂的应用需求，如遇到有依赖关系的异步逻辑或者发送ajax请求时，则会较为麻烦。

看个示例：

这段代码可以正常执行，但是里面却执行了5次回调。

这么多的回调会导致代码的逻辑不连贯、不线性，非常不符合人的常规思维，也即异步回调影响到了我们的编码方式。

遇到这种情况，我们通常可以封装异步代码，降低处理异步回调次数，让处理流程变得线性，如jQuery的$.ajax就是这么