当前位置: 首页 > news >正文

异步背后的奥秘:事件循环

异步背后的奥秘:事件循环

复习环节

JavaScript运行时

我们都知道,JavaScript本身是一个单线程的,那JavaScript是如何处理同时发生的多个任务的呢?

  1. 首先JavaScript引擎运行在一个容器中,这个容器可能是浏览器或者node中;

  2. JavaScript对象存储在内存中的位置,我们称之为堆

  3. 实际执行JavaScript上下文代码是调用栈(Call Stack);

  4. 然后网页 中提供了很多的Web API提供给引擎使用,比如DOM,计时器,Fetch API等等

  5. 然后就是事件循环了,这个是JavaScript运行事的关键部分,他负责处理异步操作和任务队列;有事件循环了,JavaScript就可以在主线程中运行非阻塞式的操作了;事件循环实现一般就是通过回调队列,来自事件需要准备执行的函数,例如点击事件、计时器、一些数据等等;

异步JavaScript如何在幕后工作

  • 先看一段代码片段
el = document.querySelector('img');
el.src = 'dog.jpg';
el.addEventListener('load', () => {el.classList.add('fedeIn');
});fetch('https://xxxxxxx/api').then(res => console.log(res));//后续代码
  1. 调用堆栈 Call Stack

JavaScript是单线程的,只有一个调用堆栈,用于执行上下文代码,遵循先入后出的原则

  • 所以第一行代码会立即执行,变量赋予;

  • 第二行浏览器就开始尝试加载图片;

  • 第三行的load监听事件,会等待图片加载完成后,回调函数就会被放入回调队列中,注意,由于是load事件,这并不会阻塞上下文的代码执行;

  • fetch异步操作,它是一个网络请求,也会立即执行,返回一个promise,这个网络请求的处理会交给浏览器Web APIs

  1. Web APIs

它是浏览器提供的功能,它允许JavaScript执行异步的操作,不会阻塞主线程,所有操作是由浏览器在后台处理

  • 比如这里的图片加载喝fetch请求
  1. 微任务队列 Microtask Queue

它主要是存放Promise的回调函数,它的优先级高于回调队列,事件循环会优先处理它的任务;

  • fetch的回调函数,当网络请求完成之后,then中的回调函数就会被访问微任务队列优先处理
  1. 回调队列

它就是存放异步操作的回调函数了,比如DOM事件,定时器等等;

  • 比如上述代码中的图片加载,当加载完成后,load事件就会被放入回调队列
  1. 事件循环

它是JavaScript异步操作的核心,它会一直检查调用堆栈喝任务列表,主要是一下的步骤:

  • 当调用堆栈为空,就会调出任务队列取出任务并且执行

  • 如果微任务队列为空,就会处理回调队列的任务;

  • 所以在上述的代码中,fetch完成后会将回调函数放入微任务队列中,事件循环处理完微任务后,执行console.log(res);当图片加载完成后,load事件回调函数被放入回调队列中,微任务队列完成后,执行el.classList.add('fedeIn;

总结:

  • 经过上述的讲解,就能明白JavaScript这种多线程的模型,可以实现异步代码不阻塞主线程的执行;

  • 在我们编程中,一切外部资源的等待,完全交给浏览器和运行时的环境,这样可以有效的节省CPU和内存的资源;

  • 利用这种异步操作,也使得JavaScript对于用户交互更加的灵活,也可以更快的响应用户的操作;

  • 事件循环和任务队列也可以不创建多个线程的情况下,处理大量的并发请求;

相关文章:

异步背后的奥秘:事件循环

异步背后的奥秘:事件循环 复习环节 JavaScript运行时 我们都知道,JavaScript本身是一个单线程的,那JavaScript是如何处理同时发生的多个任务的呢? 首先JavaScript引擎运行在一个容器中,这个容器可能是浏览器或者nod…...

Springboot使用RabbitMQ实现关闭超时订单的一个简单示例

1.maven中引入rabbitmq的依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency> 2.application.yml中进行rabbitmq相关配置&#xff1a; # rabbit…...

小程序基础 —— 07 创建小程序项目

创建小程序项目 打开微信开发者工具&#xff0c;左侧选择小程序&#xff0c;点击 号即可新建项目&#xff1a; 在弹出的新页面&#xff0c;填写项目信息&#xff08;后端服务选择不使用云服务&#xff0c;开发模式为小程序&#xff0c;模板选择为不使用模板&#xff09;&…...

【Golang 面试题】每日 3 题(十五)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…...

Docker命令(用法说明详解)

一、常见Docker容器命令 #根据image创建一个新容器并运行&#xff08;即使该image已经存在容器&#xff0c;也会再创建一个新容器&#xff09; docker run IMAGE_NAME #根据image创建一个新容器并运行。 #选项-d&#xff1a;指定容器为后台运行&#xff0c;--name自定义该容器…...

leetcode 热题100(131. 分割回文串)c++

链接&#xff1a;131. 分割回文串 - 力扣&#xff08;LeetCode&#xff09; 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 示例 1&#xff1a; 输入&#xff1a;s "aab" 输出&#xff…...

vs2022编译opencv 4.10.0

参考&#xff1a;Windosw下Visual Studio2022编译OpenCV与参考区别在于&#xff0c;没有用cmake GUI&#xff0c;也没有创建build目录&#xff0c;直接用vs2022打开了C:\code\opencv目录&#xff0c;即CMakeLists.txt所在根目录。没有修改默认下载地址&#xff0c;采用手动下载…...

Bash 中的 2>1 | tee 命令详解

Bash 中的 2>&1 | tee 命令详解 在 Linux 和 Unix 系统中&#xff0c;命令行提供了强大的输出控制功能&#xff0c;能够灵活地处理标准输入&#xff08;stdin&#xff09;、标准输出&#xff08;stdout&#xff09;和标准错误&#xff08;stderr&#xff09;。本文将详…...

MySQL数据库的日志

一、概论 日志&#xff08;log&#xff09;是一种记录系统运行时各种状态和事件的文件。 它通常用于系统监控、故障排查、安全审计和性能分析。日志文件可以记录用户操作、系统错误、应用程序行为等信息。日志文件通常包含时间戳、事件类型、事件描述等关键信息&#xff0c;以…...

DataCap 2024.4.1 版本发布:MongoDB 驱动支持、工作流引擎升级

尊敬的 DataCap 用户&#xff1a; DataCap 2024.4.1 版本现已正式发布。本次更新包含多项重要功能升级和性能优化&#xff0c;现将主要更新内容公布如下&#xff1a; 核心功能升级 数据库功能增强 (实现功能) 新增数据库管理功能&#xff1a;支持创建、删除和切换数据库完善表…...

二十三种设计模式-单例模式

单例模式&#xff08;Singleton&#xff09;&#xff1a;确保一个类只有一个实例&#xff0c;并提供一个全局访问点。 单例模式两种实现方法&#xff1a;懒汉式和饿汉式。 懒汉式&#xff08;Lazy Initialization&#xff09; 懒汉式单例模式在第一次被使用时才创建实例&…...

【微服务】SpringBoot 国际化适配方案使用详解

目录 一、前言 二、国际化概述 2.1 微服务中的国际化是什么 2.1.1 国际化概念 2.1.2 为什么需要国际化 2.2 微服务中常用的国际化方法 2.2.1 资源文件分离 2.2.2 使用国际化框架 2.2.3 使用动态模板 2.2.4 使用数据库存储 2.2.5 API设计结合配置中心 三、SpringBoot…...

太阳能电池板缺陷识别数据集,使用yolo,coco json,pasical voc xml格式标注,可识别旁路二极管,电池故障,热点,2234张原始图片

太阳能电池板缺陷识别数据集&#xff0c;使用yolo&#xff0c;coco json&#xff0c;pasical voc xml格式标注&#xff0c;可识别旁路二极管,电池故障,热点,2234张原始图片 以下是该项目的一些用例&#xff1a; 太阳能发电厂监控&#xff1a;该模型可用于自动化检查和识别大型…...

客户案例:基于慧集通平台集成打通小满CRM+金蝶云星空+钉钉

一、引言 本案例原型公司是一家生物科技公司&#xff0c;公司自开创以来专注于体外诊断生物活性原材料的研究、生产、销售和服务&#xff0c;致力于为全球体外诊断试剂生产企业提供领先且具有竞争力的核心原料和相关辅助产品服务。公司以卓越的产品和优质的服务赢得了客户的广…...

ubuntu 如何使用vrf

在Ubuntu或其他Linux系统中&#xff0c;您使用ip命令和sysctl命令配置的网络和内核参数通常是临时的&#xff0c;这意味着在系统重启后这些配置会丢失。为了将这些配置持久化&#xff0c;您需要采取一些额外的步骤。 对于ip命令配置的网络接口和路由&#xff0c;您可以将这些配…...

Debian-linux运维-ssh配置(兼容Jenkins插件的ssh连接公钥类型)

系统版本&#xff1a;Debian 12.5、11.1 1 生成密钥对 可以用云服务商控制台生成的密钥对&#xff0c;也可以自己在客户端或者服务器上生成&#xff0c; 已经有密钥对就可以跳过这步 用户默认密钥文件路径为 ~/.ssh/id_rsa&#xff0c;可以在交互中指定路径&#xff0c;也可…...

K8S详解(5万字详细教程)

目录 ​编辑 一、集群管理命令 二、命名空间 1. 获取命名空间列表 2. 创建命名空间 3. 删除命名空间 4. 查看命名空间详情 三、Pod 1. Pod概述 2. Pod相位状态 3. 管理命令 3.1 获取命名空间下容器(pod)列表 3.2 查看pod的详细信息 3.3 创建 && 运行 3.4 …...

Redis6为什么引入了多线程?

大家好&#xff0c;我是锋哥。今天分享关于【Redis6为什么引入了多线程&#xff1f;】面试题。希望对大家有帮助&#xff1b; Redis6为什么引入了多线程&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Redis 6 引入了多线程的主要目的是提高性能&#…...

KMP 2024 年总结,Kotlin 崛起的一年

2024 Google I/O 上正式官宣了 KMP&#xff08;Kotlin Multiplatform&#xff09;项目&#xff0c;它是 Google Workspace 团队的一项长期「投资」项目&#xff0c;由 JetBrains 开发维护和开源的项目&#xff0c;简单来说&#xff0c;JetBrains 主导&#xff0c;Google Worksp…...

leecode188.买卖股票的最佳时机IV

这道题目我在买卖股票III就已经得出规律了&#xff0c;具体可看买卖股票的最佳时机||| class Solution { public:int maxProfit(int k, vector<int>& prices) {int nprices.size();vector<vector<int>> dp(n,vector<int>(2*k1,0));for(int j1;j&l…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...