自JavaScript诞生之日起,频繁与异步打交道便是这门语言的使命,并为此衍生出了许多设计和理念。因此,深入理解异步的概念对于前端工程师来说极为重要。
什么是异步?
程序是分“块”执行的。最常见的“块”是函数。在一个块内,语句大体上从上到下依次执行(除了“声明提升”等个别例外,但那是发生在编译阶段),这些语句便是同步代码;而有一些语句,即所谓的回调函数,并不会按照“正常的”顺序执行,而是会在将来的某一时刻被调用执行,这部分语句便是异步代码。
也就是说,同步和异步的本质区别在于:一个现在执行,一个将来执行。此处的“现在”和“将来”与时间长短无关,而是指“是否在同一个块内执行”。
举个例子:
// **同步** var data = 0; // getData是某种阻塞式的IO操作 data = getData(); // IO操作耗时10秒 console.log(data); // 语句A
// **异步** var data = 0; // ajax是某个库函数 ajax('www.someurl.com', function(res) { data = res; console.log(data); // 语句B }); // ajax操作耗时1秒 console.log(data); // 语句C
其中语句A、C是同步代码,而B位于异步块内,也就是说,“同步”部分的三条语句在同一个块内执行,而“异步”部分的代码被分成了两个执行块。如果把这两段代码放在两个浏览器里,同时开始执行,则这三条语句从时间线上看完成的顺序是:C(几乎立即)->B(1秒后)->A(10秒后),可见同步、异步的概念与时间上的先后没有必然关系。
想象如下场景,一群代码语句正依次排队进入一家名叫“CPU”的电影院看电影,突然,其中一条语句被检票员“JS引擎”拦下了,检票员对该语句说:“你是异步代码,不属于这个场次,请到休息区等候。请放心,我们已经记住你了,到了你的场次我们会通知的。”
“那我该看哪场电影呢?”
“这个不一定,有可能下一场就轮到你,也有可能等好几场。”
“那我要等多久呢?”
“这也不一定,等候时间从无限趋近于0到正无穷大都有可能。”
“……”
语句B所在的回调函数就是那个被拦下的苦命的异步代码。
JS中的异步
本文开头说,JS是为异步而生的。为什么这么说呢?
首先,JS是为了给网页提供用户交互功能而发明的脚本语言,而用户行为是无法预知的,页面只能在用户动作时被动响应,因此响应代码必然是异步执行的。
另外,自从发明了ajax,JS还承担了网络通信的任务,这是一种时间无法预知的IO操作,而为了不阻塞用户界面,IO也必须做成异步的。
上面说了两个异步场景,加上第三个,便构成了JS的三大异步来源:用户交互、IO、定时器。
定时器很有意思,因为它是唯一一个创建“自我控制”的异步代码的方式,可以大致控制异步代码被调用的时机(但无法精确控制)。看如下代码:
// **定时器** var data = 0; // 将时延设为0 setTimeout(function() { data = 1; console.log(data); // 语句A }, 0); console.log(data); // 语句B
试问,A和B谁先执行?
答案是B,因为A是异步代码嘛,必须等到“下一场”才能执行。
那么下一个问题来了,JS是如何实现异步调度的?
事件队列
答案就是事件队列。接触过前端的人应该或多或少知道这个概念。
JS引擎(如Chrome的V8)本身只负责编译和执行宿主环境“喂”给它的语句,事件队列由宿主环境提供。当引擎发现回调代码时,它便通知宿主环境在“适当”的时候来调用该回调。但是既然是异步代码,那就存在一个问题:可能同一个时间有多个回调被触发,也有可能一个回调正在执行时另一个回调被触发了。JS又是单线程,不能并行处理多个回调。这种情况下怎么办呢?学过操作系统的我们毫不犹豫作答:弄一个队列,FIFO啊!于是就有了事件队列。队列里的其实并不是“事件”,而是一个个异步代码块(回调函数)。每当一个“事件”(不只是DOM事件)被触发,相应的回调函数便被加入队列,等待被依次调用。调用一个回调函数的过程被称为一个tick。
回顾上一部分的代码,setTimeout实质上是在指定时延之后把回调函数加入事件队列的队尾,因此即使时延为0,也一定比当前tick更晚执行,而且开始执行的时间往往会稍晚于设定的时延。
有一个地方值得注意:没有任何办法“插队”,也无法打断当前tick的运行。因为在这种机制下,对回调函数的调度,如何时被调用、调用几次等,都掌握在宿主环境的手里,它不提供API的话,JS本身没有办法影响。
更进一步思考,发现JS的三大异步来源(用户交互:DOM;IO:AJAX;定时器:无标准,浏览器厂商自己搞的??)都不是ECMAScript标准的势力范围!这意味着什么呢?细思恐极……直到有一天,随着ES6的发布,Promise闪亮登场,标志着ECMAScript开始设法争夺对异步的控制权,前端开发进入了一个崭新的时代……
推荐阅读:《你不知道的JavaScript·中卷》第二部分:异步和性能