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

Js 主线程和异步队列哪个先执行

news 来源：原创 2025/6/27 5:22:06

JavaScript 主线程与异步队列执行顺序详解

JavaScript 是单线程语言，通过事件循环（Event Loop）机制来处理同步和异步任务。以下是主线程与异步队列的执行顺序解析：

1. 执行顺序基本原则

console.log('1. 主线程同步任务');setTimeout(() => {console.log('6. 宏任务队列 - setTimeout');
}, 0);Promise.resolve().then(() => {console.log('4. 微任务队列 - Promise');
});console.log('2. 主线程同步任务');queueMicrotask(() => {console.log('5. 微任务队列 - queueMicrotask');
});console.log('3. 主线程同步任务');// 输出顺序：
// 1. 主线程同步任务
// 2. 主线程同步任务
// 3. 主线程同步任务
// 4. 微任务队列 - Promise
// 5. 微任务队列 - queueMicrotask
// 6. 宏任务队列 - setTimeout

2. 执行顺序详细机制

执行栈（Call Stack）

同步代码立即执行
函数调用形成栈帧

任务队列（Task Queue）

微任务队列（Microtask Queue）：
- Promise 回调（then/catch/finally）
- queueMicrotask()
- MutationObserver（浏览器）
- process.nextTick（Node.js）
宏任务队列（Macrotask Queue）：
- setTimeout/setInterval
- I/O 操作
- UI 渲染（浏览器）
- setImmediate（Node.js）
- requestAnimationFrame（浏览器）

3. 完整事件循环流程

执行当前同步代码（主线程）
执行完所有同步代码后，检查微任务队列
- 执行所有微任务（直到队列为空）
如有需要，进行UI渲染（浏览器环境）
从宏任务队列取出一个任务执行
重复上述过程（事件循环）

4. 复杂示例分析

console.log('脚本开始');setTimeout(() => {console.log('setTimeout1');Promise.resolve().then(() => {console.log('Promise in setTimeout1');});
}, 0);setTimeout(() => {console.log('setTimeout2');
}, 0);Promise.resolve().then(() => {console.log('Promise1');Promise.resolve().then(() => {console.log('Promise in Promise1');});
});Promise.resolve().then(() => {console.log('Promise2');
});console.log('脚本结束');/* 输出顺序：脚本开始脚本结束Promise1Promise2Promise in Promise1setTimeout1Promise in setTimeout1setTimeout2
*/

5. Node.js 与浏览器的差异

环境	微任务优先级	宏任务优先级顺序
浏览器	Promise > MutationObserver	动画帧 > I/O > 定时器 > UI渲染
Node.js	process.nextTick > Promise	setImmediate > setTimeout/setInterval

6. 实践建议

长时间运行的微任务会阻塞渲染和宏任务执行

// 避免这种情况
Promise.resolve().then(() => {while(true) { /* 无限循环 */ }
});

合理分配任务类型：
- 高优先级任务：使用微任务
- 低优先级任务：使用宏任务

避免嵌套太深：

// 不易维护的深层嵌套
setTimeout(() => {Promise.resolve().then(() => {setTimeout(() => {// ...}, 0);});
}, 0);

理解这些执行顺序规则对于调试异步代码、优化性能和避免竞态条件至关重要。

Js 主线程和异步队列哪个先执行

JavaScript 主线程与异步队列执行顺序详解 JavaScript 是单线程语言，通过事件循环（Event Loop）机制来处理同步和异步任务。以下是主线程与异步队列的执行顺序解析： 1. 执行顺序基本原则 console.log(1. 主线程同步任务);setTim…...

编程日记 2025/6/27 5:22:06

C#实现HTTP服务器：处理文件上传---解析MultipartFormDataContent

完整项目托管地址：https://github.com/sometiny/http HTTP还有重要的一块：文件上传。这篇文章将详细讲解下，前面实现了同一个链接处理多个请求，为了方便，我们独立写了一个HTTP基类，专门处理HTTP请求。 ht…...

编程日记 2025/6/27 6:59:06

【hadoop】远程调试环境

根据上一节，我们已经安装完成hadoop伪分布式环境 hadoop集群环境配置_jdk1.8 441-CSDN博客还没安装的小伙伴可以看看这个帖子这一节我们要实现使用vscode进行远程连接，并且完成java配置与测试目录 vscode 配置远程安装java插件新建java项目 …...

编程日记 2025/6/27 20:39:21

检索增强生成（RAG）：强化 AI 智能体的知识 “武装”

技术点目录第一章、智能体(Agent)入门第二章、基于字节Coze 构建智能体(Agent)第三章、基于其他平台构建智能体（Agent）第四章、国内外智能体(Agent)经典案例详解第五章、大语言模型应用开发框架LangChain入门第六章、基于LangChain的大模型API接入第七章…...

编程日记 2025/6/22 14:11:50

使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例

1. 使用 Provider 实现局部刷新示例 1：ChangeNotifier Consumer 通过 ChangeNotifier 和 Consumer 实现局部刷新。 import package:flutter/material.dart; import package:provider/provider.dart;void main() {runApp(ChangeNotifierProvider(create: (_) &g…...

编程日记 2025/6/22 14:11:37

notepad++ 正则表达式

注意：Notepad正则表达式字符串最长不能超过69个字符 \ 转义字符如：要使用 “\” 本身, 则应该使用“\\” \t Tab制表符注：扩展和正则表达式都支持 \r 回车符CR 注：扩展支持，正则表达式不支持 \n 换行符…...

编程日记 2025/6/27 20:44:20

一起学大语言模型-通过ollama搭建本地大语言模型服务

文章目录 Ollama的github地址链接安装下载需求配置更改安装目录安装更改下载的模型存储位置Ollama一些目录说明日志目录运行一个模型测试下测试下更改服务监听地址和端口号 Ollama的github地址链接 https://github.com/ollama/ollama 安装下载 mac安装包下载地址&#xff1…...

编程日记 2025/6/27 19:51:38

webpack配置详解+项目实战

webpack在vue中的配置，适合想重新认知webpack的你 webpack配置-初级配置 1、配置入口和出口文件 2、配置loader 3、配置eslint（可组装js、jsx检查工具） 4、配置babel（将高级的js语法转换成低版本的js语法） 5、使用 ht…...

编程日记 2025/6/27 20:17:30

【学习笔记】文件上传漏洞--js验证、mime验证、.user.ini、短标签、过滤、文件头

概念文件上传漏洞什么是文件上传漏洞？ 文件上传漏洞是指由于程序员在对用户文件上传部分的控制不足或者处理缺陷，而导致的用户可以越过其本身权限向服务器上上传可执行的动态脚本文件。这里上传的文件可以是木马，病毒，恶意脚…...

编程日记 2025/6/25 3:33:44

经典卷积神经网络LeNet实现（pytorch版）

LeNet卷积神经网络一、理论部分1.1 核心理论1.2 LeNet-5 网络结构1.3 关键细节1.4 后期改进1.6 意义与局限性二、代码实现2.1 导包2.1 数据加载和处理2.3 网络构建2.4 训练和测试函数2.4.1 训练函数2.4.2 测试函数2.5 训练和保存模型2.6 模型加载和预测一、理论部分 LeNet是一…...

编程日记 2025/6/27 20:59:05

【VM虚拟机ip问题】

我就是我，不一样的烟火。文章目录前言一、启动VM虚拟机1. 开启虚拟机2. 输入账号密码登录3. 依次输入指令二、主机ping地址测试1. ping ip地址-成功三、安装-MobaXterm_Personal_21.51. 点击Session2. 选择SSH连接3. 输入信息4. 首次进入5. 连接成功总结前言 …...

编程日记 2025/6/27 19:48:04

【计算机视觉】YOLO语义分割

一、语义分割简介 1. 定义语义分割（Semantic Segmentation）是计算机视觉中的一项任务，其目标是对图像中的每一个像素赋予一个类别标签。与目标检测只给出目标的边界框不同，语义分割能够在像素级别上区分不同类别，从…...

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

【C++游戏引擎开发】《线性代数》（3）：矩阵乘法的SIMD优化与转置加速

一、矩阵乘法数学原理与性能瓶颈 1.1 数学原理矩阵乘法定义为：给定两个矩阵 A （ m n ） \mathrm{A}（mn） A（mn）和 B （ n p ） \mathrm{B}（np） B（np），它们的乘积 C = A B \mathrm{C}=AB C=AB 是一个 m p \mathrm{m}p mp 的矩阵，其中： C i , j = ∑ k = 1…...

编程日记 2025/6/25 21:38:15

聚焦交易能力提升！EagleTrader 模拟交易系统打造交易成长新路径

在全球市场波动加剧的背景下，交易者面临的挑战已不仅限于技术分析层面。许多交易者在实盘操作中常因情绪干扰导致决策变形，如何构建科学的交易心理与风险控制体系成为行业关注焦点。国内自营交易考试EagleTrader运用自己研发的模拟交易系统&#xff0c…...

编程日记 2025/6/27 16:48:34

文件分片上传

1前端 <inputtype"file"accept".mp4"ref"videoInput"change"handleVideoChange"style"display: none;">2生成hash // 根据整个文件的文件名和大小组合的字符串生成hash值，大概率确定文件的唯一性fhash(f…...

编程日记 2025/6/27 9:03:49

C#Lambda表达式与委托关系

1. 核心关系图示 A[委托] --> B[提供方法容器] B --> C[Lambda表达式] C --> D[委托实例的语法糖] A --> E[类型安全约束] C --> F[编译器自动生成委托实例] 2. 本质联系 2.1 类型关系 ‌Lambda表达式‌是编译器生成的‌委托实例‌表达式自动匹配符合签名的…...

编程日记 2025/6/23 19:52:10

机器翻译和文本生成评估指标：BLEU 计算公式

📌 BLEU 计算公式 BLEU 主要由**n-gram精确匹配率（Precision）和长度惩罚（Brevity Penalty, BP）**组成。 1️⃣ n-gram 精确匹配率计算不同长度的 n-gram（1-gram, 2-gram, ..., n-gram）在生成…...

编程日记 2025/6/27 14:57:32

24 python 类

在办公室里，类就像一个部门（如销售部、财务部），定义了该部门员工的共同属性（姓名、职位）和行为（处理客户、提交报表）。一、面向对象技术简介作为一个要入门码农的牛马&#xff0…...

编程日记 2025/6/25 1:21:04

pycharm与python版本

python 3.6-3.9 pycharm 2021版本搭配最好 python 3.8 pycharm 2019版本搭配最好 pycharm各版本下载...

编程日记 2025/5/26 15:31:49

23种设计模式-结构型模式-外观

文章目录简介问题解决方案示例代码总结简介也称：门面模式、Facade。外观是一种结构型设计模式，能为程序库、框架或其他复杂类提供一个简单的接口。问题假设你必须在代码中使用某个复杂的库或框架中的众多对象。正常情况下，你需要负责…...

编程日记 2025/6/25 12:05:15

open3d教程（三）点云的显示

官方文档位置： Visualization - Open3D 0.19.0 documentationhttps://www.open3d.org/docs/release/tutorial/visualization/visualization.html核心方法： o3d.visualization.draw_geometries([几何对象列表]) import open3d as o3dprint("Load …...

编程日记 2025/6/27 20:31:05

node.js、npm相关知识

Node.js 是一个基于 Chrome V8 JavaScript 引擎构建的开源、跨平台的 JavaScript 运行时环境，主要用于服务器端编程。它允许开发者使用 JavaScript 编写高性能的后端服务，突破了 JavaScript 仅在浏览器中运行的限制。 npm（Node Package Man…...

编程日记 2025/6/27 20:46:03

大象如何学会太空漫步？美的：科技领先、To B和全球化

中国企业正处在转型的十字路口。一边是全新的技术、全新的市场机遇；一边是转型要面临的沉重负累和巨大投入，无数中国制造、中国品牌仍在寻路，而有的人已经走至半途。近日，美的集团交出了一份十分亮眼的2024年财报。数据显示&…...

编程日记 2025/6/26 22:53:23

Go红队开发— 收官工具

文章目录免责声明个人武器开发美观输出Whois查询反查ip目录扫描子域名爆破被动扫描主动扫描(字典爆破)CDN检测免责声明 💡 本博客绝不涉及任何非法用途。 💡 使用者风险自担，违规后果自负。 💡 守法为先，技术向善。 …...

编程日记 2025/6/27 19:49:35

Android 应用程序包的 adb 命令

查看所有已安装应用的包名命令：adb shell pm list packages说明：该命令会列出设备上所有已安装应用的包名。可以通过管道符|结合grep命令来过滤特定的包名，例如adb shell pm list packages | grep com.pm，这将只显示包名中包含co…...

编程日记 2025/6/27 13:10:55

北京南文观点：后糖酒会营销，以战略传播重构品牌信心坐标

第112届全国糖酒会落下帷幕，参展品牌面临一个关键命题。如何在流量洪流中沉淀品牌价值？北京南文（全称：南文乐园科技文化（北京）有限公司）认为，糖酒会的结束恰是算法时代品牌认知战的真…...

编程日记 2025/6/27 20:10:31

Qt - findChild

findChild 1. 函数原型2. 功能描述3. 使用场景4. 示例代码5. 注意事项6. 总结在 Qt 中，每个 QObject 都可以拥有子对象，而 QObject 提供的模板函数 findChild 就是用来在对象树中查找满足特定条件的子对象的工具。下面我们详细介绍一下它的使用和注意事…...

编程日记 2025/6/27 20:06:14

2025年3月个人工作生活总结

本文为 2025年3月工作生活总结。研发编码一个curl下载失败问题的记录问题： 某程序，指定IP和账户密码配置，再使用curl库连接sftp服务器，下载文件。在CentOS系统正常，但在某国产操作系统中失败，需要用命…...

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

Spring Boot 七种事务传播行为只有 REQUIRES_NEW 和 NESTED 支持部分回滚的分析

Spring Boot 七种事务传播行为支持部分回滚的分析支持部分回滚的传播行为 REQUIRES_NEW：始终开启新事务，独立于外部事务，失败时仅自身回滚。NESTED：在当前事务中创建保存点（Savepoint），可局部…...

编程日记 2025/6/27 21:00:43

NVIDIA工业设施数字孪生中的机器人模拟

工业设施数字孪生中的机器人模拟文章目录工业设施数字孪生中的机器人模拟数字孪生技术的价值NVIDIA Omniverse平台工业机器人仿真的核心组件示例一：使用Isaac Sim创建基本机器人场景示例二：机器人运动规划和轨迹执行示例三：传感器集成与感知…...

编程日记 2025/6/23 22:12:36

docker安装jenkins

docker安装jenkins 1.安装javaJDK 服务器安装javaJDK ,因为我的服务器是直接集成了宝塔面板，我就直接从宝塔面板去安装JDK 最好安装17的JDK，因为后面会安装jenkins，需要17的版本 1.2查看安装是否完成 java --version 安装成功如下&#x…...

编程日记 2025/6/23 5:46:26

量子计算与人工智能融合的未来趋势

最近研学过程中发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击链接跳转到网站人工智能及编程语言学习教程。读者们可以通过里面的文章详细了解一下人工智能及其编程等教程和学习方法。在当今科技飞速发展…...

编程日记 2025/6/24 8:21:59

人工智能在生物医药-新版ChatGPT-4o辅助一键生成机制图

新版ChatGPT-4o辅助一键生成机制图作为一位生物医学教授专家，我将基于PubMed最新研究和科研大数据信息，遵循您的要求，一步一步进行思考和预测。核心问题：乳酸化修饰促进肾透明细胞癌（ccRCC）恶性进展的机…...

编程日记 2025/6/1 14:57:30

支持 MCP 协议的开源 AI Agent 项目

关键要点研究表明，目前有多个开源 AI Agent 项目支持 MCP 协议，包括 ChatMCP、HyperChat、5ire 和 Cherry Studio 等。这些项目主要用于聊天或桌面助手，允许通过 MCP 协议连接外部数据和工具。MCP 协议是 2024 年 11 月由 Anthropic 开源的…...

编程日记 2025/6/25 19:21:50

JavaRedis和数据库相关面试题

JavaRedis面试题 1. Redis是什么以及Redis为什么快？ Redis（Remote Dictionary Server）是一个开源的内存键值数据库，支持多种数据结构（如字符串、哈希、列表、集合等），并提供持久化、复制、…...

编程日记 2025/6/25 16:33:33

Android开发RxJava3延迟操作

Android开发RxJava3延迟操作直接上代码： /*** param timeMillis 毫秒单位* desc : 延迟多少毫秒操作,* 注：它和Activity生命周期绑定，界面关闭了不会再执行delayTodoListener.delayTodo()* author : congge on 2021-03-25 15:31**/p…...

编程日记 2025/6/25 8:30:58

android 设置状态栏背景

一让activity ui界面和手机状态栏一样的背景要让 Activity 的 UI 界面和手机状态栏具有相同的背景颜色，并且能够随着深色模式和非深色模式的切换而改变颜色，你可以按照以下步骤操作： 1. 让 Activity 和状态栏背景颜色一致使用 window.s…...

编程日记 2025/4/11 14:21:44

vue 常见优化手段

文章目录 vue常见的优化手段前言使用key（避免明明相同的dom，每次更新都要重新生成）使用冻结的对象（避免无意义的响应式数据）使用函数式组件（减少vue组件实例的生成）vue3vue2使用计算属性（减少数据计算的次数）非实时绑定的表单项（避免表单过多触发监听事件）保持对象的…...

编程日记 2025/5/28 2:55:31

vue生命周期、钩子以及跨域问题简介

Vue 的生命周期是指 Vue 实例从创建到销毁的整个过程。在这个过程中，Vue 提供了一系列的生命周期钩子（Lifecycle Hooks），允许开发者在特定的时间点执行代码。以下是 Vue 的生命周期和钩子的简单说明： Vue 的生命周期阶…...

编程日记 2025/6/27 16:47:55

主相机绑定小地图

资源初始化：在类中通过 property 装饰器定义主相机、小地图相机、小地图精灵等资源属性，便于在编辑器中赋值。在 start 方法里，当确认这些资源存在后，创建渲染纹理并设置其大小，将渲染纹理与小地图相机关联&#xff0c…...

编程日记 2025/5/28 10:35:28

关于音频采样率，比特，时间轴的理解

是的，你的理解完全正确！-ar、-af aresampleasync1000 和 -b:a 64k 分别用于控制音频的采样率、时间戳调整和比特率。它们各自有不同的作用，但共同确保音频的质量和同步性。下面我将详细解释每个参数的作用和它们之间的关系。 1. -ar 参数作用…...

编程日记 2025/6/26 4:03:32

三、FFmpeg学习笔记

FFmpeg是一个开源、跨平台的多媒体处理框架，能够实现音视频的录制、转换、剪辑、编码、解码、流媒体传输、过滤与后期处理等几乎所有常见的多媒体操作。其强大之处在于几乎支持所有的音视频格式、编解码器和封装格式，是业界公认的“瑞士军刀”。 FFmp…...

编程日记 2025/6/26 8:04:01

什么是 Java 泛型

一、什么是 Java 泛型？ 泛型（Generics） 是 Java 中一种强大的编程机制，允许在定义类、接口和方法时使用类型参数。通过泛型，可以将数据类型作为参数传递，从而实现代码的通用性和类型安全。简单来说&…...

编程日记 2025/6/22 12:09:07

从 WPF 到 MAUI：跨平台 UI 开发的进化之路

一、引言在软件开发领域，用户界面（UI）开发一直是至关重要的环节。随着技术的不断发展，开发者对于创建跨平台、高性能且美观的 UI 需求日益增长。Windows Presentation Foundation（WPF）和 .NET Multi - pl…...

编程日记 2025/6/24 10:39:05

Docker学习之dockerfile篇（day8）

文章目录前言一、问题描述二、具体内容1. Docker 镜像原理2. Docker 镜像制作3. Dockerfile 概念Dockerfile 的基本结构： 4. Dockerfile 关键字5. Docker 实战案例5.1 基于 Nginx 构建 Web 服务器 6. 验证与总结6.1 验证 Dockerfile6.2 总结前言 Docker 是一种轻…...

编程日记 2025/6/23 17:13:41

Kotlin 作用域函数：apply、let、run、with、also

在 Kotlin 开发中，作用域函数（Scope Functions）是一组能让代码更简洁、更函数式的高阶函数。它们通过不同的作用域规则和返回值设计，解决了对象配置、空安全处理、链式操作等常见场景问题。本文将结合核心特性、代码示例和对比表格…...

编程日记 2025/6/27 17:16:13

Java 线程池与 Kotlin 协程高阶学习

以下是Java 线程池与 Kotlin 协程高阶学习的对比指南，结合具体代码示例，展示两者在异步任务处理中的差异和 Kotlin 的简化优势： 分析： 首先，我们需要回忆Java中线程池的常见用法，比如通过ExecutorService创…...

编程日记 2025/6/22 23:49:56

C++学习笔记（三十三）——forward_list

一、std::forward_list (1) forward_list与其适用场景 std::forward_list 是 C的STL中的单向链表（Singly Linked List），它相比 std::list（双向链表）更轻量，适用于仅需要单向遍历的场景。主要特点&#…...

编程日记 2025/6/21 17:59:06

ROS订阅相机图像识别颜色并发布识别信息

一、前言区别于之前的直接驱动相机，这里改为读取图像话题进行处理，原因是如果opencv驱动相机后只能单一使用，就限制了其他识别功能（除非将原始图像发布出来），所以这里改成可以读取任意相机图像话题的方法…...

编程日记 2025/6/24 11:41:58

Redis-15.在Java中操作Redis-Spring Data Redis使用方式-操作集合类型的数据

一.操作集合类型的数据 package com.sky.test;import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.data.redis.core.*;import j…...

编程日记 2025/6/24 1:42:15