深入浅出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就是这么