1. Javascript的运行时模型——事件循环
JS的运行时是个单线程的运行时,它不像其他编程语言,比如C++,Java,C#这些可以进行多线程操作的语言。当它执行一个函数时,它只会一条路走到黑,不会在当前函数结束之前去调用其他的函数(除非当前函数主动调用其他函数)。它也不用担心会有其他线程打扰它,因为它的运行时只有一个线程。如果你还记得一些计算机原理的话,这种运行时只有一个栈,设计起来相当的简单。
一条路走到黑的设计很棒,因为它足够简单,但是又是谁决定哪个函数从开始进入栈内执行呢?答案是JS的运行时还有一个事件等待队列与栈搭配,每当运行栈为空时(也就是当前函数运行结束),JS的运行时就从当前的事件队列中取出一个消息处理,执行与这个消息相关联的函数。这种行为可以用以下代码来说明:
1 while (eventQueue.waitForMessage()) {
2 let event = eventQueue.pop();
3 let handler = event.handler;
4 handler(); //执行事件关联的函数
5 context.scheduler.schedule(); //让调度器处理一下其他事务
6 }
有了运行栈和事件队列之后,我们的Javascript运行时已经初具雏形。不过Javascript中的变量都是对象,它们的大小通常很大,可不是一个小小的栈能放下的,如果我们熟悉C++,就会知道一般在C++中我们只在栈中存储基本类型(int, bool等)和指针,而指针所指的位置是内存堆中的一个地址,这也是JS的对象的存储地点。下面这张图可以形象地解释一下JS运行时的模型。
2. 事件循环模型的优点和缺点
先说优点。除了实现上的简单,Javascript的最大优点就是完全异步,永不阻塞。这句话可能有点令人迷糊,一个单线程的运行时怎么完全异步,永不阻塞?实际上虽然JS运行时单线程,但是浏览器是个多进程多线程的环境,这一个点在后端也一样,虽然Node是个单线程JS运行时,但是后端还有其他进程和线程配合Node一起完成响应操作。
以浏览器打开IndexedDB为例,当你执行indexedDB.open()的之后,当前的Javascript运行栈就结束了,JS可以处理其他事件的关联函数,所以JS不会阻塞。那原来的open操作交给谁了呢?浏览器会调用其他线程接管这个打开数据库的过程,当返回时,浏览器会在JS运行时的事件队列中添加一个打开成功或者打开失败的事件,同时将你当时添加的回调函数关联到事件。
再说缺点。我们都知道JS的调用函数只会一条路走到黑,而且没有正常的方法能打断这一过程,如果这一路恰好比较长(比如进行了大量的数学运算),就会使JS进入一种类阻塞的状态,页面会无法响应。等等!刚说JS永不阻塞,这里怎么又冒出一个类阻塞呢?这时因为我们所说的阻塞一般都是指IO阻塞,也就是CPU等IO结束的过程,这种情况在JS中可以永远不会发生(注意这里是可以,不是一定,某些IO操作是有同步的API可以调用的)。所谓类阻塞状态呢,就是在执行CPU密集型任务,这是一种不可避免的过程。那为什么这种情况下页面会没有响应呢?这时因为浏览器虽然会把事件放入事件队列里,但是由于前一个函数还没执行完,页面响应事件关联的函数得不到执行,自然页面会表现出不响应的状态。
3. Promise的实现
Promise是JS处理回调的一种方式,也是利用JS的事件循环模型的一个编程范式包装,也是ES7中await async的基础。如果说回调是对JS事件模型最直接最拙劣的实现的话,Promise至少给回调加了件衣服,使它不再那么难看。但本质上讲,Promise还是描述JS事件循环模型的一种工具。下面给个例子来说明它和JS事件模型的联系。
let getUrlAsync = (url) => {
let promise = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
});
return promise;
};
getUrlAsync('http://exaple.com/text/11111')
.then(res => console.log(res))
.catch(error => console.log(error));