Javascript 单线程指的是在一个浏览器进程中只存在一个 Javascript 执行线程,所以任务需要顺序排列等待执行,而不能像 Java 等多线程语言一样并发执行。但是这种单线程模型在处理耗时的异步任务是会出现较长时间的线程阻塞,导致后续的任务不能被及时处理。所以在 Javascript 中存在异步的处理方式用于处理这种情况,不过严格来说所谓的异步,本质上还是借助于多线程的宿主实现的,并发 Javascript 语言本身特性。我想尝试着总结一下在不同的宿主环境下,Javascript 的异步实现机制。

但凡“ 即是单线程又是异步 ”的语言都有一个共同的特点:它们是 event-driven 的,所以 Javascript 异步的实现也与其事件机制关系密切。

在浏览器端:

浏览器端的 Javascript 实现了两个很重要的异步 API,它们分别是 定时器AJAX请求,它们具体都是怎么工作的呢?

定时器

定时器比如 setTimeout 被执行时,由浏览器的定时器线程执行的定时计数,而并不是 Javascript 执行线程负责计数,可以想象如果是 Javascript 执行线程负责计数,那必定会造成执行线程的阻塞。定时器线程在定时时间将定时事件推入 Javascript 事件队列。当 Javascript 主线程同步代码执行完毕时,会去轮询该事件队列,取出最开始事件的处理函数推入主线程中被执行。

解释至此我们可以知道,为什么会说 Javascript 的定时器是不完全准时触发的呢?因为 Javascript 事件队列中的任务是被顺序取出执行的,如果在定时任务之前还存在其它的任务,或者主线程中的同步任务还没有被执行完毕,则定时任务会等到这之前的任务全部执行完毕之后,即主线程空闲出来了,才会被取出执行。

一个关于定时器的例子

我们希望在 500 ms 之后触发定时事件,然而上面这一段代码在 chrome 中执行的结果定时事件却是在 1000 ms 后才被触发。因为我们在定时器的下面写了一个空循环,在还不到 1000 ms 时 Javascript 主线程不会处于空闲状态,主线程同步代码在还没有执行完毕时,Javascript 不会去取出事件队列中的回调执行。

AJAX

AJAX 请求和定时器类似,同样是委托浏览器线程代为执行耗时任务,这里是借由浏览器的HTTP请求线程发起对服务器的请求,在请求得到响应之后触发请求完成事件,将回调函数推入事件队列等待执行。

req.send()方法是 AJAX  向服务器发生数据,它是一个异步任务,而 req.onreadystatechange()属于事件回调,只有在主线程同步代码执行完毕之后才会被从事件队列中取出执行,所以它是在 req.send()方法前面还是后面无关紧要,因为不管处于哪个位置,它都不会被立即执行。

这让我们想起似乎我们在给 DOM 元素绑定交互事件的时候也是这样,我们不需要去关心在文件的哪个区域声明我们的事件监听函数。其实原理是类似的,当用户点击一个绑定点击处理函数的 DOM 元素时,会有一个点击事件排入事件队列,该点击事件也需要等到当前所有正在运行的代码结束之后(可能还要等待其它此前已排队的事件也依次结束),才会执行。

NodeJS端:

NodeJS 的异步实现和浏览器端实现有所不同。在 NodeJS 中 Libuv 为 Node.js 提供了跨平台,线程池,事件池,异步 I/O 等能力,是 Node.js 如此强大的关键。Libuv 为上层的 Node.js 提供了统一的 API 调用,使其不用考虑平台差距,隐藏了底层实现。Libuv 本身就是异步和事件驱动的,所以,当我们将 I/O 操作的请求传达给 Libuv 之后,Libuv 开启线程来执行这次 I/O 调用,并在执行完成后,传回给 Javascript 进行后续处理。

总结来说,一个异步 I/O 的大致实现流程如下:

发起 I/O 调用

1 用户通过 Javascript 代码调用 NodeJS 核心模块,将参数和回调传入核心模块

2 NodeJS 核心模块将传入参数和回调封装为一个请求对象

3 将这个请求对象推入到I/O线程池中等待执行

4 Javascript 发起的异步调用结束,Javascript 线程继续执行后续操作

执行回调

1 异步任务完成之后,会将结果存放在请求对象的 result 属性上,并发出操作完成通知

2 每次事件循环时会检查 I/O 线程池中是否存在已经完成的 I/O 操作,如果有就将请求事件加入到I/O观察者队列当中,之后当作事件处理

3 处理I/O观察者事件时,会将之前封装在请求对象中的回调函数取出,并将 result 参数传入执行,以完成 Javascript 回调的目的

完结

参考:

Node.JS探秘 初始单线程的Node.JS

JavaScript 运行机制详解:再谈Event Loop

深入检出 NODEJS

 

Javascript 异步实现机制的更多相关文章

  1. JavaScript异步机制

    单线程异步执行的JavaScript JavaScript是单线程异步执行的,单线程意味着代码在任务队列中会按照顺序一个接一个的执行.异步代表JavaScript代码在任务队列中的顺序并不完全等同于代 ...

  2. JavaScript的异步运行机制

    ----异步运行机制如下: 1.左右同步任务都在主线程上执行,形成一个执行栈 2.主线程值外,还存在一个任务队列,只要异步任务有了运行结果,就在任务队列中放置一个事件 3.一旦执行栈中的所有同步任务执 ...

  3. [转]JavaScript异步机制详解

    原文: https://www.jianshu.com/p/4ea4ee713ead --------------------------------------------------------- ...

  4. 前端知识点回顾之重点篇——JavaScript异步机制

    JavaScript异步机制 来源:https://www.cnblogs.com/zhaodongyu/p/3922961.html JavaScript是单线程异步执行的,单线程意味着代码在任务队 ...

  5. javaScript的执行机制-同步任务-异步任务-微任务-宏任务

    一.概念理解 1.关于javascript javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变.所以一切javascr ...

  6. JavaScript异步编程的主要解决方案—对不起,我和你不在同一个频率上

    众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...

  7. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  8. JavaScript异步编程(1)- ECMAScript 6的Promise对象

    JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...

  9. 简述JavaScript的运行机制

    想要理解JavaScript的运行机制,需要分别深刻理解以下几个点: · JavaScript的单线程机制 · 任务队列(同步任务和异步任务) · 事件和回调函数 · 定时器 · Event Loop ...

随机推荐

  1. USACO 2015 December Contest, Platinum Problem Max Flow【树链剖分】

    题意比较难理解,就是给你n个点的树,然后给你m个修改操作,每一次修改包括一个点对(x, y),意味着将x到y所有的点权值加一,最后问你整个树上的点权最大是多少. 比较裸的树链剖分了,感谢Haild的讲 ...

  2. NLPIR中文分词器的使用

    一.普通java项目 (1)添加项目jar包 File -> Project Structure     Libarries 添加jar包jna-4.0.0.jar (2)将Data文件夹复制到 ...

  3. C语言-指针、数组、结构体、分支、循环混合使用

    1.写一个程序,输出如下内容: //############################################################# //### name number ma ...

  4. 理解javascript:void(0);和href="#"

    我们经常可以看见这样的代码: <a href="javascript:void(0);">链接</a> void的意思是空的,无效的意思,但是在js中是表示 ...

  5. java 读写excle

    2014-04-16 20:38:20 java读写excel 晚上打算研究如何c来编写

  6. 七 APPIUM Android 定位方式

    1.定位元素应用元素   1.1通过id定位元素 Android里面定位的id一般为resrouce-id: 代码可以这样写: WebElement element = driver.findElem ...

  7. C# Winform窗口之间传值的多种方法浅析(转)

    摘要http://www.jb51.net/article/63837.htm 这篇文章主要介绍了C# Winform窗口之间传值的多种方法浅析,本文起讲解了通过构造器传值.通过属性传递.通过事件携带 ...

  8. Quartz2D 之 绘制文本

    1. 基础概念 1.1. 字体(Font) 同一大小.同一样式的字形的集合. 1.2. 字符(Character) 字符表示信息本身,一般指某种编码,如Unicode编码. 1.3. 字形(Glyph ...

  9. PHP之Mysql常用SQL语句示例的深入分析

    1.插入数据insert into表名(列名1,列名2,列名..) values(值1,值2,值...); insert into product(name, price, pic_path) val ...

  10. Java多线程(学习篇)

    Java多线程:(学习篇) 1.什么是线程 2.线程状态 3.线程中断 4.线程交互 5.同步机制 6.锁机制 7.堵塞队列与堵塞栈 8.条件变量.原子量.线程池等 9.线性安全类和Callable与 ...