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

  • 相关阅读:
    httpclient详细介绍
    HttpClient
    JAVA WEB项目中各种路径的获取
    mvn 如何添加本地jar包 IDEA pom.xm
    jdbc连接数据库的步骤
    PostgreSQL 类型转换 -除法
    PostgreSQL学习手册
    前端工程师必备技能汇总
    github上一些觉得对自己工作有用的项目收集
    Ninja:Java全栈Web开发框架-Ninja中文网
  • 原文地址:https://www.cnblogs.com/leegent/p/6016403.html
Copyright © 2020-2023  润新知