漫话JavaScript与异步·第一话——异步:何处惹尘埃

自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·中卷》第二部分:异步和性能

posted on 2016-10-31 16:45  大唐西域都护  阅读(1302)  评论(2编辑  收藏  举报

导航