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

JavaScript面试题之消息队列

news 来源：原创 2025/7/5 21:54:41

JavaScript消息队列详解：单线程的异步魔法核心

在JavaScript的单线程世界中，消息队列（Message Queue）是实现异步编程的核心机制，它像一位高效的调度员，让代码既能“一心多用”又避免卡顿。本文将深入剖析消息队列的底层原理、运作机制及实际应用场景。

一、为什么需要消息队列？单线程的生存之道

JavaScript运行在单线程环境中，意味着同一时间只能执行一个任务。如果所有操作（如网络请求、定时器、用户点击）都同步执行，页面会因长时间等待而完全卡死。例如：

javascript
复制
// 同步代码的灾难：页面卡死5秒
console.log("开始");
for(let i=0; i<1e9; i++){} // 模拟耗时计算
console.log("结束");

消息队列的救赎：浏览器将异步任务（如setTimeout、HTTP请求）放入队列，主线程按顺序处理完同步任务后，再从队列中取出异步任务执行，实现非阻塞。

二、消息队列与事件循环：环环相扣的调度系统

1. 核心组件

调用栈（Call Stack）：执行同步代码，遵循“后进先出”。
消息队列（Task Queue）：存放异步任务回调，遵循“先进先出”。
微任务队列（Microtask Queue）：存放优先级更高的微任务（如Promise回调）。

2. 事件循环（Event Loop）的工作流程

执行调用栈中的同步代码。
当调用栈为空时，检查微任务队列并执行所有微任务。
取出消息队列中的第一个宏任务执行。
重复上述过程，形成循环。

示例：

console.log("1"); // 同步任务setTimeout(() => console.log("2"), 0); // 宏任务Promise.resolve().then(() => console.log("3")); // 微任务console.log("4"); // 同步任务// 输出顺序：1 → 4 → 3 → 2

三、消息队列的运作机制详解

1. 任务分类

任务类型	常见API	执行优先级
宏任务	`setTimeout`、`setInterval`	低
微任务	`Promise`、`MutationObserver`	高

2. 执行顺序规则

同步代码 > 微任务 > 宏任务
每个宏任务执行后，会清空微任务队列

复杂场景示例：

setTimeout(() => console.log("宏任务1"), 0);Promise.resolve().then(() => {console.log("微任务1");setTimeout(() => console.log("宏任务2"), 0);
});Promise.resolve().then(() => console.log("微任务2"));// 输出顺序：
// 微任务1 → 微任务2 → 宏任务1 → 宏任务2

四、消息队列的四大应用场景

1. 异步任务处理

// 用户点击按钮后异步处理
button.addEventListener('click', () => {fetch('/api/data').then(updateUI); // 放入微任务队列
});

2. 流量削峰

// 高并发请求排队处理
const requestQueue = [];
function addRequest(url) {requestQueue.push(url);if (!isProcessing) processNext();
}function processNext() {if (requestQueue.length === 0) return;const url = requestQueue.shift();fetch(url).then(handleResponse); // 控制并发量
}

3. 应用解耦

// 订单系统与库存系统解耦
function createOrder(orderData) {saveToDB(orderData);messageQueue.publish('order_created', orderData); // 发布消息
}// 库存系统订阅消息
messageQueue.subscribe('order_created', updateInventory);

4. 延迟执行

// 30分钟后关闭未支付订单
setTimeout(() => checkPaymentStatus(orderId), 30 * 60 * 1000);

五、手动实现简单消息队列

class SimpleQueue {constructor() {this.tasks = [];this.isProcessing = false;}addTask(task) {this.tasks.push(task);if (!this.isProcessing) this.process();}process() {this.isProcessing = true;while (this.tasks.length > 0) {const task = this.tasks.shift();try {task();} catch (e) {console.error("任务执行失败:", e);}}this.isProcessing = false;}
}// 使用示例
const queue = new SimpleQueue();
queue.addTask(() => console.log("任务1"));
queue.addTask(() => console.log("任务2"));

六、注意事项与最佳实践

避免回调地狱
使用Promise/async/await替代嵌套回调：

// 改进前
fetchData1(data => {fetchData2(data, () => {// 更多嵌套...});
});// 改进后
fetchData1().then(fetchData2).then(handleResult);

警惕内存泄漏
及时清除无用定时器和事件监听：

const timer = setTimeout(() => {}, 1000);
clearTimeout(timer); // 不再需要时清理

优先使用微任务
需要立即执行的逻辑使用Promise而非setTimeout(fn, 0)。

七、总结：消息队列的本质与价值

消息队列是JavaScript异步编程的基石，它通过巧妙的调度机制，在单线程环境中实现了高效的非阻塞操作。理解其运作规律（如事件循环、宏微任务优先级）能帮助开发者：

编写高性能的前端代码
设计解耦的分布式系统
优化复杂业务逻辑的执行顺序

现代框架（如React的批量更新、Vue的异步渲染）都深度依赖消息队列机制。掌握这一核心概念，是进阶为高级JavaScript开发者的必经之路。

JavaScript面试题之消息队列

JavaScript消息队列详解：单线程的异步魔法核心在JavaScript的单线程世界中，消息队列（Message Queue）是实现异步编程的核心机制，它像一位高效的调度员，让代码既能“一心多用”又避免卡顿。本文将深入剖析消…...

编程日记 2025/7/5 21:54:41

【低代码】如何使用明道云调用 Flask 视图函数并传参（POST 方法实践）

在自动化办公或业务流程管理中，明道云提供了强大的 HTTP 请求节点，可以直接调用第三方 API，包括我们常见的 Flask 服务端接口。本文将详细介绍如何使用明道云通过 POST 方法调用 Flask 视图函数并传参，包括配置要点与 Python 后端的参数接收方法。一、场景介绍我们希望…...

编程日记 2025/7/5 16:43:16

广州卓远VR受邀参加2025智能体育典型案例调研活动，并入驻国体华为运动健康联合实验室!

近日，“2025年智能体育典型案例调研活动”在东莞松山湖成功举办。本次调研活动由国家体育总局体育科学研究所和中国信息通信研究院联合主办，旨在深入贯彻中央关于培育新型消费的战略部署，通过激活智能健身产品消费潜力，加快运动健…...

编程日记 2025/6/27 23:01:14

【WebRTC】源码更改麦克风权限

WebRTC源码更改麦克风权限仓库: https://webrtc.googlesource.com/src.git分支: guyl/m125节点: b09c2f83f85ec70614503d16e4c530484eb0ee4f...

编程日记 2025/7/5 21:44:39

spring cloud alibaba-Geteway详解

spring cloud alibaba-Gateway详解 Gateway介绍在 Spring Cloud Alibaba 生态系统中，Gateway 是一个非常重要的组件，用于构建微服务架构中的网关服务。它基于 Spring Cloud Gateway 进行扩展和优化，提供了更强大的功能和更好的性能。 Gat…...

编程日记 2025/7/3 8:42:35

结课作业01. 用户空间 MPU6050 体感鼠标驱动程序

目录一. qt界面实现二. 虚拟设备模拟模拟鼠标实现体感鼠标 2.1 函数声明 2.2 虚拟鼠标实现 2.2.1 虚拟鼠标创建函数 2.2.2 鼠标移动函数 2.2.3 鼠标点击函数 2.3 mpu6050相关函数实现 2.3.1 i2c设备初始化 2.3.2 mpu6050寄存器写入 2.3.3 mpu6050寄存器读取 2.3.…...

编程日记 2025/7/4 9:28:08

Linux操作系统：信号

信号的基本介绍信号是系统响应某个条件而产生的事件，进程接收到信号会执行响应的操作； （1）信号的储存位置 vim /usr/include/x86_64-linux-gnu/bits/signum.h 旧版新版： vim /usr/include/x86_64-linux-gnu/bit…...

编程日记 2025/6/27 23:10:04

OpenCV CUDA模块特征检测与描述------用于创建一个最大值盒式滤波器（Max Box Filter）函数createBoxMaxFilter()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 createBoxMaxFilter()函数创建的是一个最大值滤波器（Maximum Filter），它对图像中每个像素邻域内的像素值取最…...

编程日记 2025/6/27 23:33:46

有没有其他影视app可以像群晖video station一样可以被Windows的本地网络驱动器找到

你是在寻找可以通过Windows本地网络（SMB共享）访问的影视媒体服务程序，就像群晖的 Video Station 一样，可以浏览、播放或挂载电影资源。以下是一些可选方案： ✅ 具备与 Synology Video Station 类似功能，并支…...

编程日记 2025/6/27 23:40:15

【神经网络与深度学习】流模型的通俗易懂的原理

流模型（Flow-based Model）简介引言流模型是一种强大的生成模型，它通过可逆变换将简单的概率分布转化为复杂的数据分布。相比于扩散模型和生成对抗网络（GAN），流模型可以精确计算数据的概率，并…...

编程日记 2025/6/27 23:14:22

OpenCV CUDA模块图像特征检测与描述------图像中快速检测特征点类cv::cuda::FastFeatureDetector

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 cv::cuda::FastFeatureDetector 是 OpenCV 的 CUDA 加速模块中的一部分，用于在图像中快速检测特征点。FAST（Features fro…...

编程日记 2025/7/5 21:44:40

分享一些多模态文档解析思路

多模态文档解析思路小记作者：Arlene 原文：https://zhuanlan.zhihu.com/p/1905635679293122466 多模态文档解析内容涉及：文本、表格和图片解析思路v1 基于mineru框架对pdf文件进行初解析其具备较完整的布局识别和内容识别，并将…...

编程日记 2025/6/27 23:32:18

【OCCT+ImGUI系列】009-Geom2d-Geom2d_AxisPlacement

一、Geom2d_AxisPlacement 简介在 OpenCASCADE 的二维几何库中，Geom2d_AxisPlacement 是一个用于定义二维坐标系的几何类，主要包含一个原点（gp_Pnt2d）和一个方向向量（gp_Dir2d）。它在构造与控制二维几何对…...

编程日记 2025/6/27 22:57:49

【深度学习:理论篇】--Pytorch之nn.Module详解

目录 1.torch.nn.Module--概述 2.torch.nn.Module--简介 3.torch.nn.Module--实现 3.1.Sequential来包装层 3.2.children和modules 1.torch.nn.Module--概述 1. PyTorch vs. Keras 的设计差异 Keras（高层框架）： 推荐通过继承 Layer 类…...

编程日记 2025/6/27 23:32:13

SQLMesh 宏操作符详解：@IF 的条件逻辑与高级应用

SQLMesh 的 IF 宏提供了一种在 SQL 查询中嵌入条件逻辑的方法，允许根据运行时条件动态调整查询结构。本文深入探讨 IF 的语法、使用场景及实际案例，帮助开发者构建更灵活、可维护的 SQL 工作流。 1. IF 宏简介 IF 是 SQLMesh 提供的条件逻辑宏&#xff…...

编程日记 2025/6/27 22:57:42

人工智能应用时代：个人成长与职业突围的底层逻辑

当人工智能从实验室走向现实场景，从概念热词变为生产力工具，一场静默却深刻的变革正在重塑人类社会的运行规则。无论是算法驱动的智能推荐、语言模型支撑的自动化创作，还是工业机器人对传统生产线的颠覆，人工智能应用已渗透至社会…...

编程日记 2025/6/27 23:31:39

STM32之串口通信蓝牙（BLE）

一、串口通信的原理与应用通信的方式处理器与外部设备之间或者处理器与处理器之间通信的方式分两种：串行通信和并行通信。串行通信传输原理：数据按位依次顺序传输（每一位占据固定的时间长度 MSB or LSB） 优点&#xff1a…...

编程日记 2025/6/27 23:05:10

【Spring Boot】配置实战指南：Properties与YML的深度对比与最佳实践

目录 1.前言 2.正文 2.1配置文件的格式 2.2properties 2.2.1基础语法 2.2.2value读取配置文件 2.2.3缺点 2.3yml 2.3.1基础语法 2.3.2配置不同数据类型 2.3.3配置读取 2.3.4配置对象和集合 2.3.5优缺点 2.4综合练习：验证码案例 2.4.1分析需求 2.4.2…...

编程日记 2025/6/27 23:07:03

数据结构篇--优先级队列排序--实验报告

实验简介框架代码实验步骤运行结果实验总结实验概述优先队列排序算法的基本思想是： 将所有待排序元素依次插入到优先队列中，然后按照从大到小的顺序，通过重复删除优先队列中的最大元素，取出所有元素，从而实现排序…...

编程日记 2025/7/5 21:48:46

【图像大模型】基于深度对抗网络的图像超分辨率重建技术ESRGAN深度解析

基于深度对抗网络的图像超分辨率重建技术ESRGAN深度解析一、技术背景与核心创新1.1 图像超分辨率技术演进1.2 核心技术创新对比二、算法原理深度解析2.1 网络架构设计2.1.1 RRDB模块结构 2.2 损失函数设计2.2.1 对抗损失（Adversarial Loss）2.2.2 感知损…...

编程日记 2025/6/27 23:40:34

Ubuntu 20.04卸载并重装 PostgreSQL

在 Ubuntu 下彻底卸载并重新安装 PostgreSQL（包括所有版本及其数据目录）的步骤下面是一个在 Ubuntu 下彻底卸载并重新安装 PostgreSQL（包括所有版本及其数据目录）的步骤。文章目录在 Ubuntu 下彻底卸载并重新安装 PostgreSQL&…...

编程日记 2025/6/27 22:57:39

1. Ruby 环境 Redis-dump 是一个 Ruby 工具，需先安装 Ruby 和 RubyGems。安装命令： sudo apt update sudo apt install ruby-full build-essential[roota29d39f5fd10:/opt/redis-dump/bin# apt install ruby-full build-essential Reading pac…...

编程日记 2025/7/5 21:53:45

AI智能分析网关V4玩手机检测算法精准管控人员手机行为，搭建智慧化安防监管体系

一、背景移动终端普及使随意用机成为常态，在生产车间、加油站、考场、手术室等场景，人员使用手机易引发生产事故、爆炸、作弊、仪器干扰等问题。传统人工巡查存在覆盖不足、响应慢、主观性强等局限，难以满足现代安全管理需求。AI智能分析…...

编程日记 2025/6/27 23:18:53

支持向量存储：PostgresSQL及pgvector扩展详细安装步骤！老工程接入RAG功能必备！

之前文章和大家分享过，将会出一篇专栏（从电脑装ubuntu系统，到安装ubuntu的常用基础软件：jdk、python、node、nginx、maven、supervisor、minio、docker、git、mysql、redis、postgresql、mq、ollama等），目前…...

编程日记 2025/7/5 21:45:39

小土堆pytorch--神经网络-非线性激活线性层及其他层介绍

1. 神经网络-非线性激活 1.1 relu与sigmoid 1.1.1 ReLU（Rectified Linear Unit，修正线性单元 ） 定义与数学表达：数学定义为 f ( x ) max ⁡ ( 0 , x ) f(x) \max(0, x) f(x)max(0,x) ，即当输入 x > 0 x > …...

编程日记 2025/6/27 23:08:48

【Vue3】数据的返回和响应式处理（ref reactive）

目录一、拉开序幕的setup 二、ref函数 2.1 访问对象的响应式处理小结：ref函数三、reactive函数 3.1 reactive同样也可以修改数组： 3.2 reactive小结： 四、Vue3中的响应式原理 4.1 vue2的响应式，对象属性的添加 4.2…...

编程日记 2025/7/2 9:38:41

【Rust智能指针】Rust智能指针原理剖析与应用指导

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，…...

编程日记 2025/6/27 23:34:22

C++ - 仿 RabbitMQ 实现消息队列（3）（详解使用muduo库）

C - 仿 RabbitMQ 实现消息队列（3）（详解使用muduo库） muduo库的基层原理核心概念总结：通俗例子：餐厅模型优势体现典型场景 muduo库中的主要类EventloopMuduo 的 EventLoop 核心解析1. 核心机制：事…...

编程日记 2025/7/5 21:45:38

Java异常处理全解析：从基础到自定义

目录 🚀前言🤔异常的定义与分类💯运行时异常💯编译时异常💯异常的基本处理 🌟异常的作用🐧自定义异常💯自定义运行时异常💯自定义编译时异常 ✍️异常的处理方案&#x1…...

编程日记 2025/6/27 22:57:44

C++初阶-vector的模拟实现2

目录 1.vector已经实现的代码总结 2.vector::resize的模拟实现 3.vector::vector(const vector& v)拷贝构造函数的模拟实现 4.vector::operator(const vector& x)的模拟实现（原始写法） 5.vector::swap的模拟实现 6.vector::operator(const …...

编程日记 2025/6/27 23:18:19

【图数据库】--Neo4j 安装

目录 1.Neo4j --概述 2.JDK安装 3.Neo4j--下载 3.1.下载资源包 3.2.创建环境变量 3.3.运行 Neo4j 是目前最流行的图形数据库(Graph Database)，它以节点(Node)、关系(Relationship)和属性(Property)的形式存储数据，专门为处理高度连接的数据而设计。…...

编程日记 2025/6/27 23:25:27

elementui初学1

当然可以！下面是从零开始创建一个最简单的 Element UI 程序的完整流程，基于 Vue 2 Element UI（如果你想用 Vue 3，请告诉我，我可以给你 Element Plus 的版本）。 ✅ 一、准备环境确保你已经安装了&#xf…...

编程日记 2025/6/27 23:32:08

lanqiaoOJ 4185：费马小定理求逆元

【题目来源】 https://www.lanqiao.cn/problems/4185/learning/ 【题目描述】给出 n，p，求。其中， 指存在某个整数 0≤a<p，使得 na mod p1，此时称 a 为 n 的逆元，即。数据保证 p 是质数且 n mod p≠0…...

编程日记 2025/6/27 23:09:23

计算机视觉与深度学习｜ Python实现CEEMDAN-ISOS-VMD-GRU-ARIMA时间序列预测（完整源码和数据)

以下是结合CEEMDAN、ISOS-VMD、GRU和ARIMA的时间序列预测的Python完整实现方案。本方案包含完整的代码、数据生成逻辑和实现细节说明。完整代码实现 import numpy as np import pandas as pd from PyEMD import CEEMDAN from vmdpy import VMD from scipy.optimize import di…...

编程日记 2025/7/3 19:51:51

前端开发遇到 Bug，怎么办？如何利用 AI 高效解决问题

前端开发遇到 Bug，怎么办？如何利用 AI 高效解决问题作为前端开发者，遇到 Bug 几乎是日常。无论是样式错乱、功能异常，还是接口数据不对，Bug 总能让人头疼。但随着人工智能（AI）技术的发展&…...

编程日记 2025/7/5 14:25:11

博主总结框架

1.博主总结框架 1.1 计算机基础类（数据结构、计算机网络、操作系统等） （1）数据结构 （2）操作系统 （3）计算机网络 （4）其他物联网入门框架 1.2 计算机图形…...

编程日记 2025/6/27 23:00:15

国产化Excel处理组件Spire.XLS for .NET系列教程：通过 C# 将 TXT 文本转换为 Excel 表格

在数据处理和管理场景中，将原始文本文件（TXT）高效转换为结构化的 Excel 电子表格是一项常见要求。对于那些需要自动生成报表或者处理日志文件的开发人员而言，借助 C# 实现 TXT 到 Excel 的转换工作，可以简化数据组织和…...

编程日记 2025/7/5 21:53:02

网络安全--PHP第一天

目标熟悉信息传递架构基于phpstydy-mysql-php 前置条件需要先在数据库中创建相应的库和表名并配置表的结构该文件为数据库配置文件名字为config.php <?php $dbip localhost;//连接数据库的地址远程连接需要输入ip等 $dbuser root;//连接数据库的用户 $dbpass ro…...

编程日记 2025/6/27 23:15:05

结构型：组合模式

目录 1、核心思想 2、实现方式 2.1 模式结构 2.2 实现案例 3、优缺点分析 4、适用场景 1、核心思想目的：将总是在重复、迭代地显示的某种自相似性的结构（部分与整体结构特征相似），例如树形结构，以统一的方式处…...

编程日记 2025/6/27 23:23:07

Node.js多版本安装工具NVM详细使用教程

一、nvm 简介 nvm（Node Version Manager）是一个用于管理多个 Node.js 版本的命令行工具，允许开发者在单个系统中轻松切换、安装和卸载不同版本的 Node.js。它是前端和后端开发中处理 Node.js 版本兼容性问题的核心工具之一。二、nvm 安装 …...

编程日记 2025/6/27 23:01:26

深度解析 Java 中介者模式：重构复杂交互场景的优雅方案

一、中介者模式的核心思想与设计哲学在软件开发的历史长河中，对象间的交互管理一直是架构设计的核心难题。当多个对象形成复杂的网状交互时，系统会陷入 "牵一发而动全身" 的困境。中介者模式（Mediator Pattern）作为行…...

编程日记 2025/6/27 22:57:43

（八）深度学习---计算机视觉基础

分类问题回归问题聚类问题各种复杂问题决策树√线性回归√K-means√神经网络√逻辑回归√岭回归密度聚类深度学习√集成学习√Lasso回归谱聚类条件随机场贝叶斯层次聚类隐马尔可夫模型支持向量机高斯混合聚类LDA主题模型一.图像数字化表示及建模基础二.卷积神经网络CNN基本原…...

编程日记 2025/6/29 8:33:14

深入剖析原型模式：原理、实现与应用实践

在软件开发的世界里，设计模式如同建筑师手中的蓝图，为复杂系统的构建提供了行之有效的解决方案。其中，原型模式（Prototype Pattern）作为创建型设计模式的重要一员，以其独特的对象创建方式，在提高代码复用性、增强系统灵活性等方面发挥着关键作用。本文将深入剖析原型模式…...

编程日记 2025/6/27 23:25:59

【论文阅读 | CVPR 2024 |RSDet:去除再选择：一种用于 RGB - 红外目标检测的由粗到精融合视角】

论文阅读 | CVPR 2024 |RSDet:去除再选择：一种用于 RGB - 红外目标检测的由粗到精融合视角 1.摘要&&引言2. 方法2.1 “由粗到细”融合策略2.2 冗余光谱去除模块（RSR）2.3 动态特征选择模块（DFS）2.4 去除与选择检…...

编程日记 2025/6/27 23:35:00

WinForms 应用中集成 OpenCvSharp 实现基础图像处理

引言欢迎关注dotnet研习社，今天我们要讨论的主题是WinForms 应用中集成 OpenCvSharp 实现基础图像处理。在常规的图像处理软件开发中，图像处理功能是这些应用程序的核心组成部分。无论是简单的照片编辑工具，还是复杂的计算机视觉应用&…...

编程日记 2025/6/27 23:16:49

apache http client连接池实现原理

在java开发中我们经常会涉及到http 请求接口，一般有几种方式： java自带的 HttpURLConnectionokHttpClientapache http client 一般我们使用apache http client会比较多点，在代码中会进行如下调用方式： private static class Htt…...

编程日记 2025/6/27 23:19:43

adb抓包

目录抓包步骤步骤 1: 获取应用的包名步骤 2: 查看单个应用的日志步骤 3: 使用日志级别过滤器步骤 4: 高级日志过滤可能的原因： 解决方案： 额外提示： 日志保存抓包步骤连接设备 adb devices 步骤 1: 获取应用的包名首先…...

编程日记 2025/6/27 22:58:50

C语言---结构体、联合体、枚举

一、初识结构体 1、结构体类型结构体和数组都是集合，但是结构体有成员，类型可以不同；数组有成员，类型相同。 int main() {struct tag{member--list //一个或者多个成员，成员变量}variable--list;//可以省略&#x…...

编程日记 2025/6/27 23:20:08

Web Workers 使用指南

文章目录前言基础使用高级特性使用 ES Modules实际应用场景图像处理大数据处理轮询任务性能优化技巧现代开发方式使用 worker-loader (Webpack) Vite中的Worker使用限制与注意事项DOM限制:通信限制:同源策略:最佳实践前言 Web Workers 是浏览器提供的 JavaScript 多线程解…...

编程日记 2025/6/27 23:19:23

JavaScript消息队列详解：单线程的异步魔法核心

一、为什么需要消息队列？单线程的生存之道

二、消息队列与事件循环：环环相扣的调度系统

1. ​​核心组件​​

2. ​​事件循环（Event Loop）的工作流程​​

三、消息队列的运作机制详解

1. ​​任务分类​​

2. ​​执行顺序规则​​