add by zhj: 只转载了一部分。异步操作的三种模式未转载,因为里面代码比较多,复制过来麻烦

原文:https://wangdoc.com/javascript/async/general.html

作者:阮一峰

1. 单线程模型

单线程模型指的是,JavaScript 只在一个线程上运行。也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。

注意,JavaScript 只在一个线程上运行,不代表 JavaScript 引擎只有一个线程。事实上,JavaScript 引擎有多个线程,单个脚本只能在一个线程上运行(称为主线程),其他线程都是在后台配合。

JavaScript 之所以采用单线程,而不是多线程,跟历史有关系。JavaScript 从诞生起就是单线程,原因是不想让浏览器变得太复杂,因为多线程需要共享资源、且有可能修改彼此的运行结果,对于一种网页脚本语言来说,这就太复杂了。如果 JavaScript 同时有两个线程,一个线程在网页 DOM 节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?是不是还要有锁机制?所以,为了避免复杂性,JavaScript 一开始就是单线程,这已经成了这门语言的核心特征,将来也不会改变。

这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段 JavaScript 代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。JavaScript 语言本身并不慢,慢的是读写外部数据,比如等待 Ajax 请求返回结果。这个时候,如果对方服务器迟迟没有响应,或者网络不通畅,就会导致脚本的长时间停滞。

如果排队是因为计算量大,CPU 忙不过来,倒也算了,但是很多时候 CPU 是闲着的,因为 IO 操作(输入输出)很慢(比如 Ajax 操作从网络读取数据),不得不等着结果出来,再往下执行。JavaScript 语言的设计者意识到,这时 CPU 完全可以不管 IO 操作,挂起处于等待中的任务,先运行排在后面的任务。等到 IO 操作返回了结果,再回过头,把挂起的任务继续执行下去。这种机制就是 JavaScript 内部采用的“事件循环”机制(Event Loop)。

单线程模型虽然对 JavaScript 构成了很大的限制,但也因此使它具备了其他语言不具备的优势。如果用得好,JavaScript 程序是不会出现堵塞的,这就是为什么 Node 可以用很少的资源,应付大流量访问的原因。

为了利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制,且不得操作 DOM。所以,这个新标准并没有改变 JavaScript 单线程的本质。

2. 同步任务和异步任务

程序里面所有的任务,可以分成两类:同步任务(synchronous)和异步任务(asynchronous)。

同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕,才能执行后一个任务。

异步任务是那些被引擎放在一边,不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了(比如 Ajax 操作从服务器得到了结果),该任务(采用回调函数的形式)才会进入主线程执行。排在异步任务后面的代码,不用等待异步任务结束会马上运行,也就是说,异步任务不具有“堵塞”效应。

举例来说,Ajax 操作可以当作同步任务处理,也可以当作异步任务处理,由开发者决定。如果是同步任务,主线程就等着 Ajax 操作返回结果,再往下执行;如果是异步任务,主线程在发出 Ajax 请求以后,就直接往下执行,等到 Ajax 操作有了结果,主线程再执行对应的回调函数。

3. 任务队列和事件循环

JavaScript 运行时,除了一个正在运行的主线程,引擎还提供一个任务队列(task queue),里面是各种需要当前程序处理的异步任务。(实际上,根据异步任务的类型,存在多个任务队列。为了方便理解,这里假设只存在一个队列。)

首先,主线程会去执行所有的同步任务。等到同步任务全部执行完,就会去看任务队列里面的异步任务。如果满足条件,那么异步任务就重新进入主线程开始执行,这时它就变成同步任务了。等到执行完,下一个异步任务再进入主线程开始执行。一旦任务队列清空,程序就结束执行。

异步任务的写法通常是回调函数。一旦异步任务重新进入主线程,就会执行对应的回调函数。如果一个异步任务没有回调函数,就不会进入任务队列,也就是说,不会重新进入主线程,因为没有用回调函数指定下一步的操作。

JavaScript 引擎怎么知道异步任务有没有结果,能不能进入主线程呢?答案就是引擎在不停地检查,一遍又一遍,只要同步任务执行完了,引擎就会去检查那些挂起来的异步任务,是不是可以进入主线程了。这种循环检查的机制,就叫做事件循环(Event Loop)。维基百科的定义是:“事件循环是一个程序结构,用于等待和发送消息和事件(a programming construct that waits for and dispatches events or messages in a program)”。

4. 异步操作的模式

下面总结一下异步操作的几种模式。

4.1 回调函数

见原文

4.2 事件监听

见原文

4.3 发布/订阅

见原文

JS异步操作概述(转)的更多相关文章

  1. js单线程和js异步操作的几种方法

    一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaS ...

  2. 壹、js的概述

    一.js的起源 1992年的时候,一家名为Nomnas的公司开发出了c减减的嵌入式脚本语言:然后利用分享的方式,扩大其市场. 之后,Netscape为了扩展浏览器的功能,开发了一个名为LiveScri ...

  3. JS异步操作新体验之 async函数

    1.初识 async 函数   ES6中提供了两个很好的解决异步操作的方案 Promise 和 Generator,ES2017标准中引入的 async 函数就是建立在 Promise 和 Gener ...

  4. js基本概述

    js(javascript)是一门编程语言,用来实现与浏览器交互. 一 js的基本语法要求有以下几点 1严格区分大小写 2标识符起名要求与java一样,参考java. 3变量的概念,变量声明使用var ...

  5. js 继承概述

    上文讲述过js实现面向对象,一定是能够实现继承的效果的.尽管说非常多的js框架都帮助我们实现了继承的功能.或者说在日常的工作和学习中我们压根就用不到js的继承,可是我们还是须要了解一下js中继承.以方 ...

  6. html的Vue.js框架概述

    前端的三大框架: Augular.js          由Google的研发团队最先写出 React.js            由facebook的团队继Augular.js之后写出 Vue.js ...

  7. JS异步操作之promise发送短信验证码.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta cont ...

  8. JS OOP 概述

    JS面向对象,大致内容 1.面向对象的基础 2.深入认识JS的函数 3.JS类的实现 4JS中共有成员,私有成员和静态成员 5.JS的反射 6.JS的继承 7.JS实现抽象类 8.JS事件设计模式 9 ...

  9. JavaScript(js)概述

    一.特点: JavaScript和java并没有直接关系,就像雷锋与雷峰塔似的没有联系: js是面向对象的,是运行在浏览器端的编程语言: 主要解决的是前端与用户的交互问题,包括交互数据. 二.js引入 ...

随机推荐

  1. Jmeter测试技巧

    最近在用Jmeter做接口测试,使用中整理了一些组件的使用技巧. 一. 用户定义的变量 都是全局变量,无论是否在某个线程组或请求内,都是采用最新赋值的内容 二. 固定定时器 在单个请求内是让本请求线程 ...

  2. day 69作业

    """ 1.按照上方 知识点总结 模块,总结今天所学知识点: 2.有以下广告数据(实际数据命名可以略做调整) ad_data = { tv: [ {img: 'img/t ...

  3. cephfs测试中出现的问题

    最近重新对cephfs进行性能测试. 测试步骤: (1) 选取一个特地版本的操作系统内核,挂载20000个客户端; (2) 用iozone中的fileop工具,在每隔挂载点上都跑一个fileop进程; ...

  4. 源码解析 || ArrayList源码解析

    前言 这篇文章的ArrayList源码是基于jdk1.8版本的源码,如果与前后版本的实现细节出现不一致的地方请自己多加注意.先上一个它的结构图 ArrayList作为一个集合工具,对于我而言它值得我们 ...

  5. Win10开启快速启动后关机变重启

    同样可以用来解决,“msconfig引导为空”,“默认操作系统为空”,“win10改为uefi启动后关机变重启”,“legacy转uefi后无法关机” 问题起因 换完主板和cpu后,新的主板在开机时总 ...

  6. Wpf DataGrid动态添加列,行数据(二)

    这是第二中方法,可直接绑定,我这里只是做出了一种思路,并不是最完美. 这里注意一下,因为我里面引用了MVVMLight,所以可能代码不是复制过去就能用了的. 样式也是,所以复制过去看不是我贴出来的界面 ...

  7. 201871010101-陈来弟《面向对象程序设计(java)》第四周学习总结

                                                                                                        ...

  8. <虚树+树型DP> SDOI2011消耗战

    <虚树+树型DP> SDOI2011消耗战 #include <iostream> #include <cstdio> #include <cstring&g ...

  9. P1553 数字反转(升级版)

    Emma,关于这道题,我..不想说啥子,也就做了它一个下午左右吧(原由:本人太菜) 补充一个知识点goto语句: 这个东西特别的好用,可以直接无条件调到冒号后面的语句,进行操作. 举个例子: #inc ...

  10. 题解 洛谷 P2010 【回文日期】

    By:Soroak 洛谷博客 知识点:模拟+暴力枚举 思路:题目中有提到闰年然后很多人就认为,闰年是需要判断的其实,含有2月29号的回文串,前四位是一个闰年那么我们就可以直接进行暴力枚举 一些小细节: ...