JS—异步编程:3分钟掌握异步编程

news2025/4/1 9:20:27

个人博客:haichenyi.com。感谢关注

一. 目录

  • 一–目录
  • 二–引言
  • 三–JavaScript 事件循环机制
  • 四–定时器的秘密:setTimeout 和 setInterval
  • 五–异步编程模型对比

二. 引言

  在现代Web开发中,异步编程是提升性能的关键技术。无论是脚本加载,用户交互,网络请求,异步编程都是贯穿始终的。上一篇博客已经说了异步加载JavaScript脚本的async和defer了。本文在深入讲解一下异步编程。

三.JavaScript 事件循环机制

3.1 单线程与任务队列

  JavaScript 运行时环境的核心结构如下:
事件执行流程

3.2 微任务 vs 宏任务

类型示例优先级执行时机
微任务Promise.then()当前宏任务结束后立即执行
宏任务setTimeout、DOM 事件下一轮事件循环

3.3 执行流程详解

  1. 同步代码入栈执行
    • 所有同步代码按顺序入**调用栈(Call Stack)**执行
    • 遇到异步API(如setTimeout,pormise等),交给浏览器内核处理
  2. 异步任务完成后回调分发
    • 宏任务(如setTimeout回调)推入宏任务队列
    • 微任务(如promise.then())推入微任务队列
  3. 事件循环规则
    • 单次循环(Tick)的步骤
      • 1.执行调用栈中的同步代码,只到栈空
      • 2.清空微任务队列 中的所有任务(按入队顺序执行)
      • 3.渲染页面(如果需要的话)
      • 4.从宏任务队列 取出第一个任务 推入调用栈执行
      • 5.重复执行

3.4 示例代码与执行过程

console.log("Script Start"); // 同步任务
setTimeout(() => console.log("Timeout"), 0); // 宏任务
Promise.resolve()
  .then(() => console.log("Promise 1")) // 微任务
  .then(() => console.log("Promise 2")); // 微任务
console.log("Script End"); // 同步任务

示例打印
执行步骤分解:
​1. 同步代码执行

	Call Stack: [main]
	→ 打印 "Script Start"
	→ 注册 `setTimeout`(交给浏览器计时模块)
	→ 注册 `Promise.then()`(微任务入队)
	→ 打印 "Script End"

2.清空微任务队列

Microtask Queue: [Promise 1]
→ 执行 `Promise 1`,打印 "Promise 1"
→ 注册下一个 `then()`(微任务入队)
→ Microtask Queue: [Promise 2]
→ 执行 `Promise 2`,打印 "Promise 2"

3.取出宏任务执行

Macrotask Queue: [Timeout]
→ 执行 `Timeout`,打印 "Timeout"

4.​最终输出

Script Start
Script End
Promise 1
Promise 2
Timeout

四.定时器的秘密:setTimeout 和 setInterval

4.1 最小延迟的真相

场景最小延迟原因
未嵌套调用1ms浏览器优化策略
嵌套超过 5 层4ms防止无限循环阻塞
后台标签页≥1000ms浏览器节流(Chrome 为例)

PS:这种值都不准确,都是需要根据实际的场景来的。
测试代码:

const start = performance.now();
setTimeout(() => {
  console.log(`实际延迟: ${performance.now() - start}ms`);
}, 0);

setTimeout延迟

4.2 setInterval 的陷阱

// 问题:回调执行时间超过间隔会导致堆积
setInterval(() => {
  heavyTask(); // 假设耗时 15ms
}, 10);

// 解决方案:递归 setTimeout + 动态补偿
function recursiveCall() {
  setTimeout(() => {
    heavyTask();
    recursiveCall();
  }, 10);
}

五.异步编程模型对比

  异步编程,并发,并行。有没有想过到底是什么?cpu就像我们的大脑,我们同时只能思考一件事情,为什么一个cpu就能实现"并发"?多任务"同时执行"?

  这个"并发"?真的是我们以为的并发吗?多任务"同时执行"真的是我们认为的"同时执行"吗?答案是否定的,不是

  让我们来走进并发的世界,世界是一个巨大的草台班子。

  我们认定一件事情:我们一个脑袋,同时只能思考一个问题,不能思考多个问题。CPU也是一样的,一个CPU同时只能执行一个指令,同时发多个指令只能排队执行。

  那么,问题就来了,这个并发,多线程是怎么实现的呢?只要把时间分的足够的小,"同一时间"能执行的任务就能足够的多,这样就能达到"并发"的目的。 怎么理解这句话呢?

举个栗子:

  1. 我们之前上学的时候,一上午4节课,每节课40分钟,我们一上午就是上完第一节语文课,上第二节数学课,上第三节英语课,上第四节物理课。以40分钟为一个时间片,按照顺序上课。
  2. 我要是以20分钟为一个时间片呢?上20分钟语文,上20分钟数学,上20分钟英语,上20分钟物理。然后,循环一次。最终语文花了40分钟,数学花了40分钟,英语花了40分钟,物理花了40分钟,还是花了相同的时间,完成了同样的事情。
  3. 要是时间片再短一点呢?上1分钟语文,上1分钟数学,上1分钟英语,上1分钟物理。循环40次
  4. 要是时间片再短一点呢?上1秒钟语文,上1秒钟数学,上1秒钟英语,上1秒钟物理。循环40*60次
  5. 要是时间片再短一点呢?上1毫秒语文,上1毫秒数学,上1毫秒英语,上1毫秒物理。循环40601000次
  6. 要是再短一点呢?

可能,你会说1分钟都学不到东西了,更别说1秒,1毫秒了,能学什么东西?诶,这就是区别,机器能记住上一次执行的状态,下次再接着执行,不要杠,不接受反驳。

并发的底层原理就行,把一个任务分割成足够小的时间块, 比方说你的任务A完成需要0.5秒钟,任务B完成需要0.5秒。例如,把任务A分成5次执行,每次消耗0.1秒,任务B也是同样。可能,CPU干了0.1秒的任务A,然后干0.2秒的任务B。具体的执行顺序,是CPU调度的。反正,总耗时是1秒钟,完成了任务A和任务B。在人类看来,1秒钟完成了两个任务,并发执行的。这就是并发。

以上,我说的都是单核,也就是1个CPU,现在手机,电脑都是4核,8核。这就设计另一个名词了:并行,并行才能我们所理解的"并发",才是真正的并发。多个任务同时执行,不存在时间片轮转

说了这么多,总结一下:精华
说了这么多,总结一下:精华
说了这么多,总结一下:精华

  1. 同步 vs 异步(编程模型视角)​
    • 同步(Synchronous)代码顺序执行,每一步操作必须等待前一步完成。
      • ​特点:逻辑简单直观,但会阻塞后续操作。
    • 异步(Asynchronous)​代码不按顺序等待,通过回调、事件循环或线程调度等方式,让耗时操作在后台执行,主流程继续运行。
      • 特点:提升吞吐量,避免阻塞,但逻辑复杂度高。
  2. 并发 vs 并行(CPU 执行视角)
    • 并发(Concurrency)​单核 CPU 上通过时间片轮转,让多个线程交替执行,看似“同时”运行(实际是快速切换)。
      • 本质:通过调度策略模拟多任务,例如线程切换、协程(Coroutine)。
    • 并行(Parallelism)​多核 CPU 上真正同时执行多个线程,每个核心独立处理任务。
      • 本质:硬件层面的同时执行。
对比项并发并行
​依赖条件单核即可需多核 CPU
​执行方式时间片轮转(交替执行)多核同时执行
​编程模型多线程、协程多线程、分布式计算
  1. Java 多线程的底层实现
    • 单核 CPU
      • 多线程通过 ​时间片轮转(Time Slicing)​ 实现并发。
      • 每个线程获得极短的 CPU 时间片(如 10ms),快速切换,用户感知为“异步”。
      • 本质:调度策略的同步切换,但宏观上表现为异步行为。
    • 多核 CPU
      • 线程可分配到不同核心,实现 ​真正并行。
      • 例如:4 核 CPU 可同时运行 4 个线程,其余线程仍依赖时间片轮转。
  2. 异步编程 ≠ 多线程
    • 多线程是实现异步的一种方式,但异步编程模型更抽象:
      • 回调(Callback)​:单线程下通过事件循环处理异步(如 JavaScript)。
      • Future/Promise:封装异步操作结果(如 Java 的 CompletableFuture)。
      • ​协程(Coroutine)​:轻量级线程,由用户态调度(如 Kotlin 协程)
    • 示例:Java 的 NIO(Non-blocking I/O)
      使用单线程事件循环处理网络请求,通过 ​非阻塞 I/O 和 ​就绪选择(Selector)​ 实现高并发,无需多线程。

  再回到本篇的开头,JavaScript的异步编程,就可以理解为,单核CPU的并发,通过时间片的轮转方式去调度任务。任务怎么调度?再看一下单线程与任务队列。这样就串起来了。

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

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

相关文章

mxgraph编辑器的使用

前端JS如何使用mxgraph编辑器 说明:此项目是JS项目,目前还不支持TS 引入资源 可以直接从官网上拿下来,或者从其他地方获取 官网编辑器 如果只是展示图形的话只引入 mxClient.js就可以了 一个免费在线编辑器 自己用它做了一个在线编辑器&#…

electron打包vue2项目流程

1,安装一个node vue2 的项目 2,安装electron: npm install electron -g//如果安装还是 特比慢 或 不想安装cnpn 淘宝镜像查看是否安装成功:electron -v 3,进入到项目目录:cd electron-demo 进入项目目录…

STM32F103_LL库+寄存器学习笔记11 - 串口收发的中断优先级梳理

导言 推荐的STM32 USARTDMA 中断优先级设置(完整方案): 以你的STM32F103 USART1 DMA实例为例: 推荐中断优先级设置中断优先级USART1空闲中断(接收相关)优先级0DMA1通道5接收中断(半满/满传输…

Postman 如何发送 Post 请求上传文件? 全面指南

写一个后端接口,肯定离不开后续的调试,所以我使用了 Postman 来进行上传图片接口的调试,调试步骤也很简单: 第一步:填写请求 URL第二步:选择请求类型第三步:选择发送文件第四步:点击…

Mathtype无法插入到Word中

在word工具栏上有没有出现Mtahtype,会出现以下两种情况: 1. 没有出现Mtahtype 2. 出现Mtahtype,但是点击会出现弹窗 “ Couldnt find the MathPage.wll ” 解决方案 首先查看word版本是32位还是64位,这个位数是office安装位数…

Agent AI综述

Agent AI综述 研究背景:早期AI研究目标分散,如今大语言模型(LLMs)和视觉语言模型(VLMs)的发展带来新契机,促使AI向能在复杂环境中担当动态角色的方向转变。Agent AI正是在这种背景下应运而生,融合语言、视觉等多种能力,有望重塑人类体验和产业标准。 Agent AI的融合:…

WPF ContentPresenter详解2

ContentPresenter与ContentControl的区别 ContentControl 和 ContentPresenter 是 WPF 中两个相关的控件,但它们在用途和功能上有一些关键的区别。理解这两者的区别和联系有助于更好地设计和开发用户界面。 1. 类层次结构 ContentControl:位于 WPF 控件…

CSS——变换、过度与动画

巧妙的使用变换、过度与动画可以让页面设计更有趣、更吸引人,同时还能提高可用性和感知性能。 文章目录 一,变换(一)2D变换1,定义旋转2,定义缩放3,定义移动4,定义倾斜5,定…

【PCB工艺】时序图(Timing Diagram)

时序图(Timing Diagram)是描述数字电路信号随时间变化的图示,广泛用于分析和设计时序逻辑电路,如锁存器(Latch)、触发器(Flip-Flop)、计数器、状态机等。这篇文章从时序图的原理、构…

第四届能源、电力与电气国际学术会议(ICEPET 2025)

重要信息 地点:中国-成都 官网:www.icepet.net(了解参会投稿等信息) 时间:2025年4月25-27日 简介 第四届能源、电力与电气会(ICEPET 2025定于2025年4月25-27日在中国成都举办。 本次将围绕能源、电力及…

【机器学习】什么是逻辑回归?

什么是逻辑回归? 逻辑回归(Logistic Regression)是一个用于分类问题的统计学模型,尽管名字里有“回归”二字,它其实是用来做分类的,不是做数值预测的。 通俗易懂的理解 我们可以通过一个简单的例子来理解…

【Bug】记录2025年遇到的Bug以及修复方案

--------------------------------------------------------分割线 2025.3.25-------------------------------------------------------windows环境下通过命令行终端(必须是命令行下,直接赋值传递,代码正常)的形式传递字符串时&a…

【NLP 46、大模型技术发展】

目录 一、ELMo 2018 训练目标 二、GPT-1 2018 训练目标 三、BERT 2018 训练目标 四、Ernie —— baidu 2019 五、Ernie —— Tsinghua 2019 六、GPT-2 2019 七、UNILM 2019 八、Transformer - XL & XLNet 2019 1.模型结构 Ⅰ、循环机制 Recurrence Mechanism Ⅱ、相对位置…

《Python实战进阶》No34:卷积神经网络(CNN)图像分类实战

第34集:卷积神经网络(CNN)图像分类实战 2025年3月28日更新 增加了 CNN和AI大模型关系的说明。 2025年3月29日更新了代码,优化损失系数曲线可视化。 详细环境配置依赖和可一次性复制的完整代码见文末。 摘要 最近大模型推陈出新迭…

【qt】 布局器

参考博客:https://blog.csdn.net/Fdog_/article/details/107522283 目录 布局管理器概念常见的布局管理器及特点🔵QHBoxLayout水平布局🔵QVBoxLayout垂直布局 🔵QGridLayout网格布局 🔵QFormLayout表单布局 QT 高级布…

VMware Windows Tools 存在认证绕过漏洞(CVE-2025-22230)

漏洞概述 博通公司(Broadcom)近日修复了 VMware Windows Tools 中存在的一个高危认证绕过漏洞,该漏洞编号为 CVE-2025-22230(CVSS 评分为 9.8)。VMware Windows Tools 是一套实用程序套件,可提升运行在 VM…

【问题解决】Linux安装conda修改~/.bashrc配置文件后,root 用户下显示 -bash-4.2#

问题描述 在Linux安装conda下的python环境时候,修改了~/.bashrc文件,修改完成后,再次进入服务器后,登录时候显示的不是正常的[rootlocalhost ~]#,而是-bash-4.2# 原因分析: 网上原因有:/root下…

RabbitMQ 技术详解:异步消息通信的核心原理与实践

这里写目录标题 RabbitMQ 技术详解:异步消息通信的核心原理与实践一、RabbitMQ 本质剖析核心架构组件 二、核心功能与应用场景主要作用典型应用场景 三、工作流程深度解析消息传递流程关键协议机制 四、Java 实现示例1. 依赖配置(Maven)2. 消…

LLM架构解析:NLP基础(第一部分)—— 模型、核心技术与发展历程全解析

本专栏深入探究从循环神经网络(RNN)到Transformer等自然语言处理(NLP)模型的架构,以及基于这些模型构建的应用程序。 本系列文章内容: NLP自然语言处理基础(本文)词嵌入&#xff0…

k近邻算法K-Nearest Neighbors(KNN)

算法核心 KNN算法的核心思想是“近朱者赤,近墨者黑”。对于一个待分类或预测的样本点,它会查找训练集中与其距离最近的K个样本点(即“最近邻”)。然后根据这K个最近邻的标签信息来对当前样本进行分类或回归。 在分类任务中&#…