JS执行顺序
众所周知,JavaScript 是单线程语言,只能同时执行做一件事(js只有一个线程,称之为main thread-主线程)
1.Javascript 运行机制 main thread 主线程和 call-stack 调用栈(执行栈),所有的任务都会被放到调用栈等待主线程执行。
2.Javascript 任务分为2类,同步任务和异步任务(异步又分为宏任务和微任务),同步和异步任务都是队列,所以是先进先出的。
3.执行顺序,同步—>异步—>MicroTask(微任务)—>MacroTask(宏任务)(异步包含宏任务和微任务,异步中微任务是优于宏任务执行的)


概念不懂,直接看下方!
JS 调用栈
JS调用栈采用的是后进先出(数据结构)的规则,当函数执行的时候,会被添加到栈的顶部,当执行栈执行完成后,就会从栈顶移出,直到栈内被清空。
它用于存储正在执行的 js代码块及其运行环境。每当创建一个新的执行上下文,就会将其添加到调用栈中。这个执行上下文包含了该函数或代码块执行所需的所有变量、参数、作用域等。
MacroTask(宏任务)
宏任务通常包括整体代码块(script),setTimeout,setInterval,setImmediate,I/O 操作等异步操作,它们会被推入到宏任务队列中等待执行。当主线程执行完当前任务后,会去检查宏任务队列,如果队列中有任务,就会从队列中取出一个任务执行,直到队列为空。
MicroTask(微任务)
微任务通常包括 Promise 的回调函数,process.nextTick,MutationObserver 等异步操作,它们会被推入到微任务队列中等待执行。当一个宏任务执行完成后,会检查微任务队列,如果队列中有任务,就会依次取出任务执行,直到队列为空。注意,微任务的执行时机是在当前宏任务执行结束后,下一个宏任务开始之前,也就是说微任务的执行优先级高于宏任务。
同步和异步事件举例
举例1:
console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');
上方代码输出顺序:
Start
End
Promise
Timeout

举例2:
console.log('Start');
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
console.log('End');
setTimeout(() => console.log('Timeout 2'), 0);
Promise.resolve().then(() => console.log('Promise 2'));
上方代码输出顺序:
Start
End
Promise
Promise 2
Timeout
Timeout 2

总结
总结一下,当 JavaScript 引擎执行代码时,先执行同步任务,执行完同步任务后,再开始执行异步任务,异步任务分宏任务和微任务,如果遇到了宏任务,会将它放到宏任务队列中等待执行;如果遇到了微任务,会将它放到微任务队列中等待执行。当主线程执行完当前任务后,会先执行微任务队列中的任务,直到微任务队列为空,再去执行宏任务队列中的任务,直到宏任务队列为空。这样就保证了异步任务的执行顺序和及时性,避免了可能出现的竞态条件和阻塞情况。
参考文章:
参考①:js微宏任务https://www.jb51.net/article/271092.htm
不足的地方请指教~
相关文章:
JS执行顺序
众所周知,JavaScript 是单线程语言,只能同时执行做一件事(js只有一个线程,称之为main thread-主线程) 1.Javascript 运行机制 main thread 主线程和 call-stack 调用栈(执行栈),所有的任务都会被放到调用栈等待主线程执行。 2.Javascript 任…...
Vscode 上安装 Compilot
GitHub Copilot 是由 OpenAI 和 GitHub 开发的 AI 工具。其目的是通过自动完成代码来帮助开发人员使用集成开发环境 (IDE),如 Visual Studio Code。它目前仅作为技术预览版提供,因此只有已在候补名单上被接受的用户才能访问它。对…...
Spring集成MyBatis与MyBatis-Plus添加分页插件
项目场景: MyBatis使用分页插件PageHelperMyBatis-Plus3.4.0版本之前添加分页插件,使用配置PaginationInterceptor;MyBatis-Plus3.4.0版本添加分页插件,使用配置MybatisPlusInterceptor; 配置示例: 1、My…...
Windows下载安装vcpkg并使用它来安装第三方库(visualstudio)
1.使用Git下载vcpkg仓库(下载比较慢,个人比较喜欢打开下面网址然后用迅雷下载,速度飞快) git clone "https://github.com/Microsoft/vcpkg.git"2.下载好之后解压打开文件夹,双击bootstrap-vcpkg.bat文件&…...
leetcode-2788按分隔符拆分字符串
题目链接 2788. 按分隔符拆分字符串 - 力扣(LeetCode) 解题思路 class Solution:def splitWordsBySeparator(self, words: List[str], separator: str) -> List[str]:result []for i in words:for j in i.split(separator):if j:result.append(j)…...
使用Ctrl+Alt+T快速打开Windows Terminal终端
在Ubuntu中我们通常使用CtrlAltT来快速打开终端,这样即炫酷又方便。然而在Windows并没有默认快捷键打开终端的操作,需要我们折腾一番。操作也不复杂,可以通过一般人都不知道用来干什么的“快捷方式”来实现。 创建Windows Terminal终端的快捷…...
Redis 消息队列和发布订阅
文章目录 基本模式生产者消费者原理&模型redis实现java实现 发布者订阅者原理&模型redis实现java实现 stream模式原理&模型工作原理redis实现Java实现 选型外传 基本模式 采用redis 三种方案: ● 生产者消费者:一个消息只能有一个消费者 ●…...
去掉element-ui的el-table的所有边框+表头+背景颜色
实例: 1.去掉table表头(加上:show-header"false") <el-table:data"tableData":show-header"false"style"width: 100%"> </el-table> 2.去掉table所有边框 ::v-deep .el-table--border th.el-table__cell, ::v-deep .el…...
还在手动复制文章吗?教你如何一键将文章从notion同步到WordPress
本文会给大家介绍如何在WordPress上安装一个插件,实现将notion上写的文章自动同步到WordPress上,从而提高写作效率,接下来请跟随我的脚步一起来操作吧! 一、插件安装 在WordPress后台添加新插件页面中搜索“notion”,…...
uni-app的学习【第三节】
五 运行环境判断与跨端兼容 uniapp为开发者提供了一系列基础组件,类似HTML里的基础标签元素,但uni-app的组件与HTML不同,而是与小程序相同,更适合手机端使用。 虽然不推荐使用 HTML 标签,但实际上如果开发者写了`div`等标签,在编译到非H5平台时也会被编译器转换为 `view`…...
全自动网页制作系统流星全自动网页生成系统重构版输入网页信息即可制作
源码优点: 所有模板经过精心审核与修改,完美兼容小屏手机大屏手机,以及各种平板端、电脑端和360浏览器、谷歌浏览器、火狐浏览器等等各大浏览器显示。 免费制作 为用户使用方便考虑,全自动网页制作系统无需繁琐的注册与登入,直接…...
云轴科技ZStack位列IDC云系统软件市场教育行业TOP2
近日,全球IT市场研究和咨询公司IDC发布 《中国云系统软件市场跟踪报告2023H1》 ZStack作为产品化的云基础软件提供商 位居云系统软件市场第一梯队 市场份额位列独立云厂商*第一 增速最快 教育行业TOP2 在教育行业,云计算已成为教育行业信息化的重要基础…...
从技术大会到面试舞台:程序猿的蜕变之旅!
在这个技术日新月异的时代,程序员们需要不断地学习和提升自己的技能。 参加技术大会,无疑是程序员们拓宽视野、提升技能的重要途径之一。然而,技术大会只是程序员成长的一部分,掌握面试技巧同样至关重要。只有将这两者完美结合&a…...
VS2019+QT5.12.12+opencv+pcl1.12.1 显示点云,运行程序报错-无法定位程序输入点于链接库 如何解决?
之前配置好VS2019QTopencv,做了简单视觉软件,实现了部分功能。昨天下载PCL1.12.1,并参考很多博友的文档配置pcl,编写点云显示代码,程序编译成功,但执行一直报错。 VC目录配置: 添加PCL各个目录下的Lib名…...
Oracle-java下载、开源/商业许可证(收费、免费说明)、版本发布日志
Oracle-java下载、开源/商业许可证(收费、免费说明)、版本发布日志 下载开源/商业许可证(收费、免费说明)java8版本发布日志以上是一般情况,具体的以官网发布信息为准例如: JDK17某些特定版本是免费的&…...
docker安装 mysql 8.0.32
首先下载 mysql 其次如果虚拟机以前安过mysql 需要把mysql关闭 命令 永久关闭mysql 但是当前不生效 需要重启虚拟机 systemctl enable mysqld 如果不想重启虚拟机 可以执行 systemctl stop mysqld //指定版本 docker pull mysql:8.0.32 // 拉取最新的…...
OPC UA 开源库编译方法及通过OPC UA连接西门S7-1200 PLC通信并进行数据交换
前言 在现代工业自动化领域,OPC UA(开放性生产控制和统一架构)是一种广泛应用的通信协议。本文将以通俗易懂的方式解释OPC UA的含义和作用,帮助读者更好地理解这一概念。 一、OPC UA的定义 OPC UA全称为“开放性生产控制和统一…...
【数据库学习】ClickHouse(ck)
1,ClickHouse(CK) 是一个用于联机分析(OLAP)的列式数据库管理系统(DBMS)。 1)特性 按列存储,列越多速度越慢; 按列存储,数据更容易压缩(类型相同、区分度);…...
Springboot之策略模式
Springboot之策略模式 策略模式的几种方式1 简单实现1.1 创建策略接口1.2 实现付款方式1.2.1 微信付款1.2.2 支付宝付款 1.3 创建策略调度器1.4 创建配置类 策略模式的几种方式 1 简单实现 场景:策略模式实现不同类型的付款动作 1.1 创建策略接口 package com.p…...
HTTP 协议和 TCP/IP 协议之间有什么区别?
HTTP(超文本传输协议)和TCP/IP(传输控制协议/互联网协议)是两种在互联网通信中广泛使用的协议,它们之间的区别和联系对许多人来说可能还不是很清晰,今天我们就带大家来一起了解一下HTTP和TCP/IP协议这2者之…...
Yuzu模拟器版本高效管理实战指南:从新手到专家的避坑技巧
Yuzu模拟器版本高效管理实战指南:从新手到专家的避坑技巧 【免费下载链接】yuzu-downloads 项目地址: https://gitcode.com/GitHub_Trending/yu/yuzu-downloads 你是否曾遇到这样的困境:刚更新的Yuzu模拟器让原本流畅的游戏变得卡顿,…...
从PIPIKAI开源项目到APK:YOLO11安卓部署全流程拆解与踩坑记录
从PIPIKAI开源项目到APK:YOLO11安卓部署全流程拆解与踩坑记录 在移动端实现实时目标检测一直是计算机视觉领域的挑战性任务。当YOLO11遇上ncnn推理引擎,再通过Android Studio的精心调校,这套组合拳能打出怎样的效果?本文将带您深…...
OpenClaw深度沟通渠道-全景深度解构
OpenClaw深度沟通渠道-全景深度解构OpenClaw的渠道(Channels)是其“交互层”的核心,是用户意图与AI执行力的唯一交汇点。选择渠道,就是选择将AI能力注入您数字生活的哪个场景。以下分析将超越简单列表,深入每个渠道的技…...
JIT编译延迟高达2.3秒?紧急修复Python 3.14.0b3中`--jit-threshold=0`参数失效Bug的3种绕行方案(含补丁级patch)
第一章:JIT编译延迟高达2.3秒?紧急修复Python 3.14.0b3中--jit-threshold0参数失效Bug的3种绕行方案(含补丁级patch) Python 3.14.0b3 引入的自适应JIT编译器在启用 --jit-threshold0 时未能立即触发热路径编译,导致首…...
Display Driver Uninstaller完全指南:解决显卡驱动残留的系统级清理方案
Display Driver Uninstaller完全指南:解决显卡驱动残留的系统级清理方案 【免费下载链接】display-drivers-uninstaller Display Driver Uninstaller (DDU) a driver removal utility / cleaner utility 项目地址: https://gitcode.com/gh_mirrors/di/display-dri…...
生信分析效率翻倍:fastp多线程+UMI处理技巧全解析(含实战案例)
生信分析效率翻倍:fastp多线程UMI处理技巧全解析(含实战案例) 在肿瘤基因检测和ctDNA测序领域,数据预处理环节往往成为整个分析流程的瓶颈。传统工具在处理海量测序数据时,不仅耗时长达数小时,还经常面临内…...
避坑指南:Dify 1.3.1 Docker-Compose部署时,除了镜像拉取慢,你还会遇到的3个典型错误
Dify 1.3.1 Docker-Compose部署实战:3个隐藏陷阱与深度排错指南 当你决定在生产环境部署Dify 1.3.1时,Docker-Compose看似简单的up -d命令背后可能暗藏玄机。本文将从真实故障场景出发,解剖那些官方文档未曾提及的"暗坑"——它们不…...
HG-ha/MTools行业实践:短视频工作室AI配音+自动字幕+封面图生成闭环
HG-ha/MTools行业实践:短视频工作室AI配音自动字幕封面图生成闭环 你是不是也遇到过这样的场景?作为短视频工作室的创作者,每天都要面对海量的视频素材。一条1分钟的视频,从剪辑、配音、加字幕到制作封面,前前后后可能…...
Electron应用打包体积优化实战:从30MB瘦身到15MB,我的electron-builder.yml配置清单
Electron应用打包体积优化实战:从30MB瘦身到15MB 最近在优化一个Electron应用的打包体积时,发现初始生成的安装包竟然达到了30MB。经过一系列配置调整和优化,最终成功将体积缩减到15MB。这个过程让我深刻体会到,electron-builder…...
nlp_structbert_siamese-uninlu_chinese-base镜像免配置优势:自动检测CUDA/cuDNN版本并提示降级建议
nlp_structbert_siamese-uninlu_chinese-base镜像免配置优势:自动检测CUDA/cuDNN版本并提示降级建议 你是不是也遇到过这种头疼事?好不容易找到一个好用的AI模型,兴致勃勃地准备部署,结果一运行就报错——CUDA版本不匹配、cuDNN找…...
