当前位置: 首页 > 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…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...