同步、异步

何为同步异步

同步任务(synchronous

  1. 同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;
  2. 同步任务进栈顺序:先进后出,后进先出;(栈只有一端开口);
  3. 同步会阻塞程序的执行;

同步任务:页面的初始化、DOM 操作、计算任务;

大白话:同步就是我强依赖于你(对方),我必须等到你的回复,才能去做下一步的事情。

异步任务(asynchronous

  1. 不进入主线程,而进入任务队列的任务,只有等主线程任务执行完毕,任务队列开始通知主线程,请求执行任务,该任务才会进入主线程执行。
  2. 异步任务进任务队列顺序:先进先出,后进后出;(队列有两端开口);
  3. 异步不会阻塞程序的执行;

异步任务: 网络请求、定时器、事件处理、异步函数;

大白话:异步就是我并不强依赖于你,我对你是否回不回复我的信息并不在意,无论你回不回复我,我都会继续去做我的事情。

一、JavaScript是一门单线程语言

总所周知,JavaScript是一门单线程语言。单线程是指JavaScript引擎执行JavaScript时只分了一个线程给它执行,所以说执行JavaScript时是单线程的。

二、何为进程?何为线程?

进程:

进程是指在计算机系统中正在执行的一个程序实例。一个程序可以创建一个或多个进程(例如:打开一个浏览器,在浏览器上打开多个网页),每个进程都有自己的内存空间、执行状态和资源使用情况。进程是操作系统对程序的一次动态执行过程的抽象。

多进程示例:

  1. 浏览器是多进程
  2. 不同类型的标签页都会开启一个新的进程
  3. 相同类型的标签页是会合并到一个进程

线程:

线程是CPU调度的最小单位,是建立在进程的基础上运行的单位,共享进程的内存空间。(CPU是电脑的大脑,可以同时打开多个程序(也可以抽象地理解为软件),例如:QQ、微信,一个线程分配给QQ,一个给微信)

三、单线程意味着什么?

JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。也就是说代码只能同步执行,必须执行上一行才能执行下一行。然而并不是还有异步

四、微任务与宏任务

微任务(microtask)

  1. 微任务会在当前任务执行完成后立即执行,在浏览器渲染之前执行。
  2. 微任务具有较高的优先级,在每个事件循环中会在宏任务执行之前执行。

微任务:Promise async/await 、Object.observe MutationObserver、 process.nextTick(Node.js 环境)。

宏任务(macrotask)

  1. 宏任务会在事件循环中执行,一般来自外部的事件,如定时器事件、UI交互事件和网络请求事件等。

宏任务setTimeout、setInterval、Ajax、DOM事件 、script(整体代码) 、I/O、UI交互事件、setImmediate(Node.js 环境)。

总结

[ 宏任务、微任务 ]是指JavaScript中异步任务的两种不同任务的分类,宏任务类似于整体的异步任务,微任务则是宏任务中的一个子任务。

  • 宏任务表示需要异步执行的任务
  • 微任务表示宏任务执行后需要立即执行的子任务

如下图所示:微任务优先级 > 宏任务优先级

五、事件循环(Event Loop)又被称为事件轮询

JavaScript的异步编程通过执行栈和消息队列来实现。首先所有的同步任务都是在主线程上执行的,它会形成一个执行栈,异步任务不会在主线程上执行,当异步任务得到响应(如某个点击事件、服务加载完成、setTimeout等待时间截止)就会被推入消息队列中。当执行栈里面的任务执行完的时候(栈空),JS引擎就会去消息队列中读取任务,它会把这个任务中的回调函数压入执行栈中,然后执行栈就又开始新的同步任务执行。


这种执行栈空就去消息队列读取任务的过程时不断循环的,每次栈空都会去消息队列读取任务,如果没有任务就一直等待,知道有新的任务出现,这叫做事件循环(event Loop)。

六、练习题

// 第一题
console.log("开始");setTimeout(function() {console.log("定时器回调函数");
}, 0);console.log("结束");// 第二题
console.log("开始");setTimeout(function() {console.log("定时器回调函数");
}, 0);Promise.resolve().then(function() {console.log("微任务");
});console.log("结束");// 第三题
console.log("开始");setTimeout(function() {console.log("定时器回调函数");
}, 0);Promise.resolve().then(function() {console.log("微任务1");
}).then(function() {console.log("微任务2");
});console.log("结束");// 第四题
console.log("开始");setTimeout(function() {console.log("定时器回调函数");
}, 0);Promise.resolve().then(function() {console.log("微任务1");Promise.resolve().then(function() {console.log("微任务2");});
});console.log("结束");// 第五题
console.log("开始");setTimeout(function() {console.log("定时器回调函数1");Promise.resolve().then(function() {console.log("嵌套微任务1");});
}, 0);setTimeout(function() {console.log("定时器回调函数2");
}, 0);Promise.resolve().then(function() {console.log("微任务");
});console.log("结束");// 第六题
console.log('script start');setTimeout(function() {console.log('setTimeout');
}, 0);Promise.resolve().then(function() {console.log('promise1');
}).then(function() {console.log('promise2');
});console.log('script end');// 第七题
console.log('script start');setTimeout(function() {console.log('setTimeout1');
}, 0);Promise.resolve().then(function() {console.log('promise1');
}).then(function() {console.log('promise2');
});setTimeout(function() {console.log('setTimeout2');
}, 0);console.log('script end');// 第八题
async function async1() {console.log('async1 start');await async2();console.log('async1 end');
}async function async2() {console.log('async2');
}console.log('script start');setTimeout(function() {console.log('setTimeout');
}, 0);async1();new Promise(function(resolve) {console.log('promise1');resolve();
}).then(function() {console.log('promise2');
});console.log('script end');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/91270.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网页采集工具-免费的网页采集工具

在当今数字化时代,网页采集已经成为了众多领域的必备工具。无论是市场研究、竞争情报、学术研究还是内容创作,网页采集工具都扮演着不可或缺的角色。对于许多用户来说,寻找一个高效、免费且易于使用的网页采集工具太不容易了。 147SEO工具的强…

Go-Ldap-Admin | openLDAP 同步钉钉、企业微信、飞书组织架构实践和部分小坑

目录 一、Docker-compose快速拉起demo测试环境 二、原生部署流程 安装MySQL:5.7数据库 安装openLDAP 修改域名,新增con.ldif 创建一个组织 安装OpenResty 下载后端 下载前端 部署后端 部署前端 三、管理动态字段 钉钉 企业微信 飞书 四、…

基于微信小程序的刷题考试系统设计与实现(适用于各类考试类、答题类程序)

文章目录 前言系统主要功能:具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计…

JavaScript Web APIs第二天笔记

Web APIs - 第2天 学会通过为DOM注册事件来实现可交互的网页特效。 能够判断函数运行的环境并确字 this 所指代的对象理解事件的作用,知道应用事件的 3 个步骤 学习会为 DOM 注册事件,实现简单可交互的网页特交。 事件 事件是编程语言中的术语&#xff…

(一)gitblit安装教程

(一)gitblit安装教程 (二) gitblit用户使用教程 (三) gitblit管理员手册 目录 前言安装1.下载Java Runtime Requirement 2.设置环境变量3.gitblit内容3.1 gitblit文件夹内容3.2 defaults.properties 主要配置选项 4 配置4.1 准备文件4.2 修改gitblit.properties4.3 修改authori…

基于自适应启动策略的混合交叉动态约束多目标优化算法(MC-DCMOEA)求解CEC2015/CEC2018/CEC2023(MATLAB代码)

一、动态多目标优化问题 1.1问题定义 1.2 动态支配关系定义 二、 基于自适应启动策略的混合交叉动态多目标优化算法 基于自适应启动策略的混合交叉动态多目标优化算法(Mixture Crossover Dynamic Constrained Multi-objective Evolutionary Algorithm Based on Se…

试图一文彻底讲清 “精准测试”

在软件测试中,我们常常碰到两个基本问题(困难): 很难保障无漏测:我们做了大量测试,但不清楚测得怎样,对软件上线后会不会出问题,没有信心; 选择待执行的测试用例&#…

跨类型文本文件,反序列化与类型转换的思考

文章目录 应用场景序列化 - 对象替换原内容,方便使用编写程序取得结果数组 序列化 - JSON 应用场景 在编写热更新的时候,我发现了一个古早的 ini 文件,记录了许多有用的数据 由于使用的语言年份较新,没有办法较好地对 ini 文件的…

map和set的具体用法 【C++】

文章目录 关联式容器键值对setset的定义方式set的使用 multisetmapmap的定义方式insertfinderase[]运算符重载map的迭代器遍历 multimap 关联式容器 关联式容器里面存储的是<key, value>结构的键值对&#xff0c;在数据检索时比序列式容器效率更高。比如&#xff1a;set…

ARP欺骗攻击实操

目录 目录 前言 系列文章列表 全文导图 1&#xff0c;ARP概述 1.1,ARP是什么&#xff1f; 1.2,ARP协议的基本功能 1.3,ARP缓存表 1.4,ARP常用命令 2&#xff0c;ARP欺骗 2.1,ARP欺骗的概述? 2.2,ARP欺骗的攻击手法 3&#xff0c;ARP攻击 3.1,攻击前的准备 3.2,…

【Spring Boot】实战:实现数据缓存框架

🌿欢迎来到@衍生星球的CSDN博文🌿 🍁本文主要学习【Spring Boot】实现数据缓存框架 🍁 🌱我是衍生星球,一个从事集成开发的打工人🌱 ⭐️喜欢的朋友可以关注一下🫰🫰🫰,下次更新不迷路⭐️💠作为一名热衷于分享知识的程序员,我乐于在CSDN上与广大开发者…

Python3 如何实现 websocket 服务?

Python 实现 websocket 服务很简单&#xff0c;有很多的三方包可以用&#xff0c;我从网上大概找到三种常用的包&#xff1a;websocket、websockets、Flask-Sockets。 但这些包很多都“年久失修”&#xff0c; 比如 websocket 在 2010 年就不维护了。 而 Flask-Sockets 也在 2…

SQL血缘解析原理

根据sql解析获取到表到表, 字段到字段间的关系,即血缘关系。实际上这是从sql文本获取到数据流的过程。 大致步骤如下&#xff1a; 1.sql文本进行词法分析 2.sql语法分析获取到AST抽象语法树 3.访问AST抽象语法树根据语法结构推测出数据的流向,例如create as select from 这种结…

[vue-admin-template实战笔记]

1.克隆项目 git clone gitgitee.com:panjiachen/vue-admin-template.git 2.安装依赖 npm install 3.运行项目就会自动打开网页&#xff0c;并且热部署插件 npm run dev 4.查看代码 //将vue-admin-template拖入到idea中即可查看代码 1)并且发现&#xff0c;常用的东西已经集…

Machine Learning(study notes)

There is no studying without going crazy Studying alwats drives us crazy 文章目录 DefineMachine LearningSupervised Learning&#xff08;监督学习&#xff09;Regression problemClassidication Unspervised LearningClustering StudyModel representation&#xff08…

unity 鼠标标记 左键长按生成标记右键长按清除标记,对象转化为子物体

linerender的标记参考 unity linerenderer在Game窗口中任意画线_游戏内编辑linerender-CSDN博客 让生成的标记转化为ARMarks游戏对象的子物体 LineMark.cs using System.Collections; using System.Collections.Generic; using UnityEngine;public class LineMark : MonoBeh…

excel筛选后求和

需要对excel先筛选&#xff0c;后对“完成数量”进行求和。初始表格如下&#xff1a; 一、选中表内任意单元格&#xff0c;按ctrlshiftL&#xff0c;开启筛选 二、根据“部门”筛选&#xff0c;比如选择“一班” 筛选完毕后&#xff0c;选中上图单元格&#xff0c;然后按alt后&…

JavaScript Web APIs第一天笔记

复习&#xff1a; splice() 方法用于添加或删除数组中的元素。 **注意&#xff1a;**这种方法会改变原始数组。 删除数组&#xff1a; splice(起始位置&#xff0c; 删除的个数) 比如&#xff1a;1 let arr [red, green, blue] arr.splice(1,1) // 删除green元素 consol…

Unity如何生成随机数(设置种子)

文章目录 随机类整数二维向量三维向量种子其他文章 随机类 我们可以使用Random类来生成一些随机数 Random类是用于生成随机数的类之一。它可以用于生成不同类型的随机数&#xff0c;如整数、浮点数和向量。 整数 我们可以使用Random.Range来生成指定范围内的随机整数或浮点数…

Windows 安装CMake

CMake 简介 CMake是一个开源的、跨平台的自动化构建系統&#xff0c;用來管理软件构建的过程。 其用途主要包括&#xff1a; 1. 跨平台编译&#xff1a;CMake支援Windows&#xff0c;Mac OS&#xff0c;Linux等多种操作系統&#xff0c;且支援多数主流编译器如GCC&#xff0…