好家伙，打工人要打工，博客会更新的没有以前频繁了

 

芜湖，一百篇了，这篇写一个比较难的异步（其实并不难理解，主要是为promise铺垫）

 

老样子，先补点基础：

1.进程

来吧，新华字典

 

 大概这么个意思

 

百度百科：

进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。

在早期面向进程设计的计算机结构中，进程是程序的基本执行实体；在当代面向线程设计的计算机结构中，进程是线程的容器。

程序是指令、数据及其组织形式的描述，进程是程序的实体。

 

狭义定义：进程是正在运行的程序的实例（an instance of a computer program that is being executed）。
广义定义：进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动。
它是操作系统动态执行的基本单元，在传统的操作系统中，进程既是基本的分配单元，也是基本的执行单元。
 
进程的概念主要有两点：
第一，进程是一个实体。每一个进程都有它自己的地址空间，一般情况下，包括文本区域（text region）、数据区域（data region）和堆栈（stack region）。
文本区域存储处理器执行的代码；数据区域存储变量和进程执行期间使用的动态分配的内存；堆栈区域存储着活动过程调用的指令和本地变量。
第二，进程是一个“执行中的程序”。程序是一个没有生命的实体，只有处理器赋予程序生命时（操作系统执行之），它才能成为一个活动的实体，我们称其为进程。
第三，进程是操作系统中最基本、重要的概念。是多道程序系统出现后，为了刻画系统内部出现的动态情况，描述系统内部各道程序的活动规律引进的一个概念,所有多道程序设计操作系统都建立在进程的基础上。
 
操作系统引入进程的概念的原因:
从理论角度看，是对正在运行的程序过程的抽象；
从实现角度看，是一种数据结构，目的在于清晰地刻画动态系统的内在规律，有效管理和调度进入计算机系统主存储器运行的程序。

 

所以说，进程是程序的进行的过程，它是实例，是分配单元，是单位

值得注意的是，如果一个程序启动两次，那么就是两个进程

来看看任务管理器中的进程

2.线程

来吧，百度百科

线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中，是进程中的实际运作单位。
一条线程指的是进程中一个单一顺序的控制流，一个进程中可以并发多个线程，每条线程并行执行不同的任务。
 
 
同一进程中的多条线程将共享该进程中的全部系统资源，如虚拟地址空间，文件描述符和信号处理等等。
但同一进程中的多个线程有各自的调用栈（call stack），自己的寄存器环境（register context），自己的线程本地存储（thread-local storage）。
 
一个进程可以有很多线程，每条线程并行执行不同的任务。
 
值得注意的是，进程是线程的容器。
 
 

3.事件循环

说到循环你会想到什么？
for()循环? 
 
来看看这篇文章吧,这篇文章可说的太TM好了
 

同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入任务队列。

主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。

上述过程的不断重复就是我们说的 Event Loop (事件循环)。

4.任务

 
我要摘抄一段书上的内容:
 
 
1.5.任务
 
 

在ES6中，有一个新的概念建立在事件循环队列之上，叫作任务队列（job queue），这个概念给大家带来的最大影响可能是Promise的异步特性（参见第3章）。

遗憾的是、目前为止，这是一个没有公开API的机制，因此要展示清楚有些困难。

所以我们目前只从概念上进行描述，等到第3章讨论Promise的异步特性时，你就会理解这些面作是如何协调和处理的。

因此，我认为对于任务队列最好的理解方式就是，它是挂在事件循环队列的每个tick之后的一个队列。(事件循环中,每一次循环称为一个tick)

在事件循环的每个tick中，

可能出现的异步动作不会导致一个完整的新事作添加到事件循环队列中，而会在当前tick的任务队列末尾添加一个项目（一个任务）。

这就像是在说：“哦，这里还有一件事将来要做，但要确保在其他任何事情发生之前就完成它。”

 

事件循环队列类似于一个游乐园游戏：玩过了一个游戏之后，你需要重新到队尾排队才能再玩一次。而任务队列类似于玩过了游戏之后，插队接着继续玩。

 

一个任务可能引起更多任务被添加到同一个队列末尾。

所以，理论上说，任务循环（jobloop）可能无限循环（一个任务总是添加另一个任务，以此类推），进而导致程序没有是够资源，

无法转移到下一个事件循环tick。从概念上看，这和代码中的无限循环（就像while（true）..）的体验几乎是一样的。

 

任务和setTimeout（..0） hack的思路类似，但是其实现方式的定义更加良好，对顺序的保证性更强: 尽可能早的将来。

设想一个调度任务（直接地，不要hack）的API，称其为schedule（..）。考虑：

console.log( "A" );

setTimeout( function(){

　　console.log( "B" );

}，0);

//理论上的“任务API”

schedule( function(){

　　　　console.log( "C" );

　　　　　　schedule( function(){

　　　　　console. log( "D"); 

　　});

});

 

可能你认为这里会打印出ABCD，但实际打印的结果是ACDB.因为任务处理是在当前事件循环tick结尾处，

且定时器触发是为了调度下一个事件循环tick_（如果可用的话！）

 
                                                                                                                                                                             ——摘自《你不知道的js（中）》
 
 
所以说任务是一个比较好理解的概念 ,这里有个非常形象的概念
就是插队，
其实我们也可以把异步粗糙地理解为是“程序的插队”
 
按原书作者的话来说，异步是基于“任务”的
 
 
 
 

5.异步

我们先从一些类似"同步"的思考方式说起,我们先举个日常生活中“比较常见”的例子：
 
今天,嗯,高数课,嗯,四十分钟,我一定要好好听,
 
于是你开始计划,我一定要认认真真听完这节高数课,绝对不干别的
 
听了两分钟之后,你:卧槽,听不懂啊! 跟TM听天书一样.
 
然后你开了把lol手游,
 
你心怀愧疚,于是你一边打着游戏,每死一次,就抬起头来看看黑板,、
 
装作自己在非常认真听课的样子
 
(一节课下来抬了十几次头)
 
打完一局之后举报队友,下课了.
 
 我们想着我们的行为是同步的，比如说，我要的我的大脑听完这节课再去玩手机，
 
但事实上我们的行为是异步的，听课-- 玩手机-- 听课-- 和同学聊聊天-- 听课-- 中午吃什么好呢？--- .........
 
 这一就是异步的一种粗糙解释了
 
我们来看一段异步代码代码：
 

<html>

<head>

<meta charset="utf-8">

<title>异步</title>

</head>

<body>

<p>回调函数等待 3 秒后执行。</p>

<p id="demo1"></p>

<p id="demo2"></p>

<script>

setTimeout(function () {

    document.getElementById("demo1").innerHTML="setTime函数已执行";

}, 3000);

document.getElementById("demo2").innerHTML="成功脱单";

</script>

</body>

</html>

我们再页面中首先看到的是

"成功脱单"

三秒过后我们会看到

"setTime函数已执行"
这也就是一个最简单的异步程序了

如果是这是一个同步程序，那么它会：

 等三秒
"setTime函数已执行"

　再出现

"成功脱单"

所以我们为什么需要异步？

设想刚才的例子代码：

如果我们把setTime函数中的3000改成三亿：

setTimeout(function () {

    document.getElementById("demo1").innerHTML="setTime函数已执行";

}, 3000000000000000);

　那么，我们可能很难再见到"成功脱单了"

（可能等个几天吧）

　而事实上我们可能的程序还有用到很多异步的请求，像ajax

　　

　如果ajax需要的时间太久，那么页面就无法加载了

 

　所以我们需要异步！　

　

　5.1.什么是异步？

 

　　　　异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。

　　　　在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。

　　　　而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。

　　　　简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

　　　　以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　————来自菜鸟教程

6.异步如何执行？

 
（粗糙概括了）

JavaScript 是一门单线程语言，异步操作都是放到事件循环队列里面，

等待主执行栈来执行的，并没有专门的异步执行线程

 一段程序，我们先进行分类，将同步的任务和异步的任务分开：

···同步的进入主线程，

···异步的进入任务队列，

主线程中的任务执行完毕后，去任务队列中读取相应的任务，推入主线程执行

That's all

(呼，终于写完了)

 
 

第一百篇:JS异步的更多相关文章

  1. 前端总结·基础篇·JS（四）异步请求及跨域方案

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  2. 深入理解node.js异步编程：基础篇

    ###[本文是基础内容,大神请绕道,才疏学浅,难免纰漏,请各位轻喷] ##1. 概述 目前开源社区最火热的技术当属Node.js莫属了,作为使用Javascript为主要开发语言的服务器端编程技术和平 ...

  3. Node.js异步处理CPU密集型任务

    Node.js异步处理CPU密集型任务 Node.js擅长数据密集型实时(data-intensive real-time)交互的应用场景.然而数据密集型实时应用程序并非仅仅有I/O密集型任务,当碰到 ...

  4. 转:web前端面试题合集 (Javascript相关)（js异步加载详解）

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  5. 前端总结·基础篇·JS（一）五大数据类型之字符串（String）

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(二)补充 前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录 这是& ...

  6. 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）

    目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...

  7. 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  8. JS 异步系列 —— Promise 札记

    Promise 研究 Promise 的动机大体有以下几点: 对其 api 的不熟悉以及对实现机制的好奇; 很多库(比如 fetch)是基于 Promise 封装的,那么要了解这些库的前置条件得先熟悉 ...

  9. JS异步编程 (2) - Promise、Generator、async/await

    JS异步编程 (2) - Promise.Generator.async/await 上篇文章我们讲了下JS异步编程的相关知识,比如什么是异步,为什么要使用异步编程以及在浏览器中JS如何实现异步的.最 ...

随机推荐

  1. Python if-else的简单表示

    常见写法 a = 1 b = 1 c = 2 if a == b: print("true") elif a == c: print("false") else ...

  2. 【小程序自动化Minium】一、框架介绍和环境搭建

    微信小程序自动化测试系列分享 一.Minium 简介 minium 是微信团队为小程序专门开发的自动化框架,我们可以用它来做小程序的UI自动化测试,但是它的能力却不仅仅在于UI自动化. 正是得益于官方 ...

  3. Vue回炉重造之图片加载性能优化

    前言 图片加载优化对于一个网站性能好坏起着至关重要的作用.所以我们使用Vue来操作一波.备注 以下的优化一.优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的 ...

  4. Vue3.0系列——「vue3.0性能是如何变快的？」

    前言 先学习vue2.x,很多2.x内容依然保留: 先学习TypeScript,vue3.0是用TS重写的,想知其然知其所以然必须学习TS. 为什么学习vue3.0? 性能比vue2.x快1.2-2倍 ...

  5. js 表面学习 - 认识结构

    JavaScript 语句由以下构成: 值.运算符.表达式.关键词和注释. 这条语句告诉浏览器在 id="demo" 的 HTML 元素中输出 "Hello Kitty. ...

  6. 关于Java中的构造方法

    关于构造方法: 1.构造方法又叫构造函数/构造器. 2.构造方法语法结构中"返回值类型"不需要指定,也不能写void,如若写void,则变成普通方法. 3.构造方法有返回值,和当前 ...

  7. VS Code 调教日记（2022.6.26更新）

    VS Code 调教日记(2022.6.26更新) 基于msys2的MinGW-w64 GCC的环境配置 下载并安装msys2 到路径...msys2安装路径...\msys64\etc\pacman ...

  8. Android高仿网易云音乐-启动界面实现和动态权限处理

    效果 实现分析 基本上没有什么难点,就是布局,然后显示用户协议对话框,动态处理权限,判断是否显示引导界面,是否显示广告界面等. 布局 <?xml version="1.0" ...

  9. Ansible Playbook概览

    Ansible playbook 执行需要三步路执行: 1.编写playbook 2.定义主机清单文件 3.设置运行环境,写入配置文件 1.编写playbook Playbook使用YAML语法格式进 ...

  10. Oracle数据库常用查询语句

    1.[oracle@dbserver ~]$ sqlplus / as sysdbaSQL*Plus: Release 11.2.0.4.0 Production on Tue Mar 15 15:1 ...