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

宏任务与微任务对比【前端异步】

目录

    • 简介
    • 微任务与宏任务的基本概念
      • 宏任务(Macrotasks)
      • 微任务(Microtasks)
      • 宏任务示例
      • 微任务示例
      • 微任务与宏任务的执行时序
    • 结论

简介

在JavaScript的异步编程中,理解事件循环(Event Loop)是至关重要的。事件循环机制确保了JavaScript的单线程能够处理高并发的异步任务。
微任务(Microtasks)宏任务(Macrotasks)是事件循环中的两种主要任务类型。
本文将介绍这两种任务的区别,并通过代码示例深入探讨它们的工作机制,帮助您掌握前端异步编程的核心概念。

在这里插入图片描述

微任务与宏任务的基本概念

JavaScript的事件循环由任务队列组成,任务队列分为两种:微任务队列和宏任务队列每个宏任务执行完毕后,JavaScript引擎会先执行所有微任务队列中的任务,然后再执行下一个宏任务。

宏任务(Macrotasks)

宏任务通常指的是那些会在事件循环的单独迭代中执行的任务,它们包括:

  1. 整体脚本执行:整个JavaScript文件或脚本标签作为首次宏任务执行。
  2. setTimeoutsetInterval:设定的定时器到期后,会作为宏任务被添加到宏任务队列。
  3. setImmediate (Node.js 特有):在Node.js中,setImmediate用于在当前事件循环结束时执行。
  4. I/O:包括从网络、文件系统等进行的输入/输出操作。
  5. UI 渲染:浏览器将计算好的DOM更新渲染到屏幕上。
  6. requestAnimationFrame:用于动画的帧同步,会在下一次重绘之前执行。

微任务(Microtasks)

微任务在当前宏任务完成后立即执行,它们包括:

  1. Promise 回调Promise.then(), .catch(), 和 .finally() 方法。
  2. MutationObserver:用于监听DOM树变化的API,当DOM变化时触发。
  3. queueMicrotask:一个标准的API,允许开发者显式地将函数排入微任务队列。
  4. process.nextTick (Node.js):在Node.js中,process.nextTick 用于延迟函数的执行直到当前操作结束,但它会在当前执行栈清空之后,下一次事件循环之前执行。

宏任务示例

尽管setTimeout的延迟时间设置为0,它仍然是一个宏任务,会在当前宏任务执行完毕后,下一个事件循环迭代中执行。

console.log('Script start');setTimeout(function() {console.log('setTimeout');
}, 0);console.log('Script end');

输出:

Script start
Script end
setTimeout

微任务示例

Promisethen回调是微任务,它们会在当前宏任务的所有代码执行完毕后立即执行。

console.log('Script start');Promise.resolve().then(function() {console.log('promise1');
}).then(function() {console.log('promise2');
});console.log('Script end');

输出:

Script start
Script end
promise1
promise2

微任务与宏任务的执行时序

在这个示例中,我们可以看到Promise的微任务在当前宏任务的代码执行完毕后立即执行,而两个setTimeout的宏任务则在下一个事件循环迭代中执行。

console.log('Script start');setTimeout(function() {console.log('setTimeout');
});Promise.resolve().then(function() {console.log('promise1');
});setTimeout(function() {console.log('setTimeout2');
}, 0);console.log('Script end');

输出:

Script start
Script end
promise1
setTimeout2 (next event loop iteration)
setTimeout

结论

  • 微任务和宏任务是JavaScript异步编程的基石。
  • 微任务提供了一种更快的异步处理方式,通常用于快速连续的异步操作,而宏任务则包括了更广泛的异步事件。

相关文章:

宏任务与微任务对比【前端异步】

目录 简介微任务与宏任务的基本概念宏任务(Macrotasks)微任务(Microtasks)宏任务示例微任务示例微任务与宏任务的执行时序 结论 简介 在JavaScript的异步编程中,理解事件循环(Event Loop)是至关…...

Autogen和LangGraph对比

AutoGen和LangGraph是两种用于构建多代理AI系统的框架,它们各有特点和优势。以下是对这两个框架的详细对比: 共同点 都支持创建多个AI代理进行协作都可以与大语言模型(LLM)集成都允许定义代理之间的交互流程都支持使用工具和外部资源来增强代理能力 AutoGen的特点 灵活的代…...

uniapp vue3微信小程序如何获取dom元素

在网上很多人说可以通过下面两种形式获取到指定dom元素 // 定义ref <div ref"box"></div>//1通过this.$refs获取dom元素 this.$refs.box//2通过ref(null)获取dom元素 let box ref(null)第一种方式在vue2中是可以获取到的&#xff0c;但是在vue3 setup中…...

Mongodb索引使用限制

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第85篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…...

阿里云通义千问开源两款语音基座模型分别是SenseVoice和CosyVoice

阿里巴巴近期发布了开源语音大模型项目FunAudioLLM&#xff0c;该项目包含了两个核心模型&#xff1a;SenseVoice和CosyVoice。可以精准多语言识别并且进行语音克隆。 SenseVoice&#xff1a;精准多语言识别与情感辨识 SenseVoice主要致力于高精度多语言语音识别、情感辨识和…...

第11章 规划过程组(二)(11.10制订进度计划)

第11章 规划过程组&#xff08;二&#xff09;11.10制订进度计划&#xff0c;在第三版教材第402~404页&#xff1b; 文字图片音频方式 第一个知识点&#xff1a;主要输出 1、进度基准 经过批准的进度模型&#xff0c;只有通过正式的变更控制程序才能进行变更&#xff0c;用作…...

如何在Spring Boot中集成Hibernate

如何在Spring Boot中集成Hibernate 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Spring Boot项目中集成Hibernate。Hibernate是一个广泛…...

Grind 75 | 3. merge two sorted lists

Leetcode 21. 合并两个有序链表 题目链接 思路&#xff1a; 和归并排序中 merge 部分一致 两个指针分别指向 2 个链表头每次选小的那个加入 res 中&#xff0c;对应指针后移一位;重复步骤2&#xff0c;直至一个指针到链表末尾将另一个剩余的全部 copy 到 res 中&#xff0c;链…...

MyBatis(35)如何在 MyBatis 中实现软删除

实现软删除在MyBatis中通常意味着更新数据库记录的某个字段&#xff0c;而不是真正地从数据库中删除记录。这个字段&#xff08;通常是is_deleted、deleted或status等&#xff09;被用来标记记录是否被删除。下面我们将详细探讨如何在MyBatis中实现软删除&#xff0c;包括数据库…...

C# 预处理器指令

C# 预处理器指令 概述 C# 预处理器指令是编译器在编译代码之前处理的指令。这些指令用于控制编译过程,包括条件编译、编译指令的定义和取消等。预处理器指令以 # 开头,不包含在代码的执行逻辑中,仅在编译阶段起作用。 常用的预处理器指令 1. #define 和 #undef #define…...

Perl编译器架构:前端与后端的精细分工

&#x1f527; Perl编译器架构&#xff1a;前端与后端的精细分工 Perl作为一种高级、通用的编程语言&#xff0c;其编译器的架构设计对于性能和灵活性至关重要。Perl编译器由前端和后端组成&#xff0c;它们各自承担着不同的职责。本文将深入解析Perl编译器前端和后端的区别&a…...

14-63 剑和诗人37 - 分布式系统中的数据访问设计

​​ 在分布式系统中,跨服务和数据库提供统一、可靠的数据访问至关重要,但又极具挑战性。微服务和数据库的拓扑结构为分布、缓存、复制和同步带来了复杂性。 让我们探索有助于解决这些复杂性并简化构建强大、高性能分布式系统的常见数据访问模式。 概述 我们将通过示例介绍…...

大数据基础:Hadoop之MapReduce重点架构原理

文章目录 Hadoop之MapReduce重点架构原理 一、MapReduce概念 二、MapReduce 编程思想 2.1、Map阶段 2.2、Reduce阶段 三、MapReduce处理数据流程 四、MapReduce Shuffle 五、MapReduce注意点 六、MapReduce的三次排序 Hadoop之MapReduce重点架构原理 一、MapReduce概…...

人工智能算法工程师(中级)课程3-sklearn机器学习之数据处理与代码详解

大家好&#xff0c;我是微学AI,今天给大家分享一下人工智能算法工程师(中级)课程3-sklearn机器学习之数据处理与代码详解。 Sklearn&#xff08;Scikit-learn&#xff09;是一个基于Python的开源机器学习库&#xff0c;它提供了简单有效的数据挖掘和数据分析工具。Sklearn包含了…...

华为机考真题 -- 螺旋数字矩阵

题目描述&#xff1a; 疫情期间&#xff0c;小明隔离在家&#xff0c;百无聊赖&#xff0c;在纸上写数字玩。他发明了一种写法&#xff1a;给出数字 个数 n 和行数 m&#xff08;0 < n ≤ 999&#xff0c;0 < m ≤ 999&#xff09;&#xff0c;从左上角的 1 开始&#x…...

防御笔记第四天(持续更新)

1.状态检测技术 检测数据包是否符合协议的逻辑顺序&#xff1b;检查是否是逻辑上的首包&#xff0c;只有首包才会创建会话表。 状态检测机制可以选择关闭或则开启 [USG6000V1]firewall session link-state tcp ? check Indicate link state check [USG6000V1]firewall ses…...

HUAWEI VRRP 实验

实验要求&#xff1a;在汇聚交换机上SW1和SW2中实施VRRP以保证终端网关的高可靠性(当某一个网关设备失效时&#xff0c;其他网关设备依旧可以实现业务数据的转发。) 1.在SW1和SW2之间配置链路聚合&#xff0c;以提高带宽速度。 2.PC1 访问远端网络8.8.8.8 &#xff0c;优先走…...

领取serv00免费虚拟主机

参考 ‍ 教程地址【免费serv00虚拟机SSH登录搭建网站】 ‍ 领取地址 ​​ 领到了 ​​ SSH登录要魔法&#xff0c;网页登录不用 ​​ 轻松搭建自己的静态网站 ​​ ‍ soulio.serv00.net 网页加载速度还可以。 ​​ ‍ ‍...

云开发技术的壁纸小程序源码,无需服务期无需域名

1、本款小程序为云开发版本&#xff0c;不需要服务器域名 2、文件内有图文搭建教程&#xff0c;小白也不用担心不会搭建。 3、本程序反应速度极快&#xff0c;拥有用户投稿、积分系统帮助各位老板更多盈利。 4、独家动态壁纸在线下载&#xff0c;给用户更多的选择 5、最新版套图…...

基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui

背景和意义 随着互联网和数字媒体行业的快速发展&#xff0c;视频网站作为重要的内容传播平台之一&#xff0c;用户量和内容丰富度呈现爆发式增长。本研究旨在设计并实现一种基于Python的哔哩哔哩数据分析系统&#xff0c;采用Flask框架、MySQL数据库以及echarts数据可视化技术…...

ChatTTS 本地部署性能优化实战:从生成缓慢到高效推理的解决方案

最近在本地部署 ChatTTS 进行语音合成时&#xff0c;发现生成速度慢得让人有点抓狂。一段几秒钟的音频&#xff0c;等待时间却要十几秒甚至更长&#xff0c;这严重影响了交互体验和批量处理效率。于是&#xff0c;我花了一些时间深入研究&#xff0c;尝试了多种优化手段&#x…...

TAI-TECH台庆 WCM2012F2SF-900T04 SOP-4 共模滤波器

特性 1.高频下具有高共模阻抗&#xff0c;实现优异的噪声抑制性能。 2.WCM2012F2SF系列实现小型化和低外形。尺寸为2.0x1.2x1.2mm。3.无铅(Pb)且不含卤素&#xff0c;符合RoHS标准。4.工作温度-40~125C(包括自温升)...

OpenClaw技能市场巡礼:GLM-4.7-Flash支持的10个实用自动化模块

OpenClaw技能市场巡礼&#xff1a;GLM-4.7-Flash支持的10个实用自动化模块 1. 为什么需要关注OpenClaw技能市场&#xff1f; 去年冬天&#xff0c;我花了整整两周时间手动整理公司邮箱里堆积如山的会议记录和客户邮件。每天重复着"下载附件-重命名-分类存储"的机械…...

OpenClaw:以智能之力重塑效率,轻量化进阶之路与国产创新展望

各位深耕AI领域的打工人、极客与企业管理者&#xff1a;2026年的春天&#xff0c;OpenClaw&#xff08;被全球用户亲切称为“小龙虾”&#xff09;早已成为科技圈的核心焦点&#xff0c;若你尚未接触这只席卷全球的开源AI Agent&#xff08;智能体&#xff09;框架&#xff0c;…...

FastLED NeoMatrix:嵌入式LED矩阵的GFX抽象与硬件加速融合框架

1. FastLED NeoMatrix&#xff1a;面向嵌入式显示系统的高性能LED矩阵驱动框架FastLED NeoMatrix 是一个专为嵌入式平台设计的、与 Adafruit_GFX 兼容且深度适配 FastLED 生态的 LED 矩阵显示库。它并非简单复刻&#xff0c;而是对原有 Adafruit_NeoMatrix 库的一次底层重构与性…...

用雪花算法就不会产生重复的ID?

今天想和大家聊聊分布式系统中常用的雪花算法&#xff08;Snowflake&#xff09;——这个看似完美的ID生成方案&#xff0c;实际上暗藏玄机。有些小伙伴在工作中一提到分布式ID&#xff0c;第一个想到的就是雪花算法。确实&#xff0c;它简单、高效、趋势递增&#xff0c;但你知…...

假如我是昇腾总架构师,面对全能电脑会问的10个破局问题与方向指引

假如我是昇腾总架构师&#xff0c;面对全能电脑会问的10个破局问题与方向指引 站在昇腾总架构师视角&#xff0c;围绕芯片、架构、工具链、生态、量产、行业落地等实际痛点&#xff0c;面向全能算力终端提出10个关键问题&#xff0c;并由其给出清晰、可执行的技术方向&#xff…...

ChatTTS WebUI 字数限制解析与高效处理方案

最近在项目中用到了 ChatTTS 的 WebUI 接口进行语音合成&#xff0c;发现了一个挺实际的问题&#xff1a;它是有字数限制的。直接丢一篇长文章过去&#xff0c;经常会因为超限而失败&#xff0c;用户体验和开发流程都受到了影响。经过一番摸索和实践&#xff0c;我总结了一套处…...

Legado内置Web服务深度剖析:轻量级架构与跨设备阅读体验升级

Legado内置Web服务深度剖析&#xff1a;轻量级架构与跨设备阅读体验升级 【免费下载链接】legado Legado 3.0 Book Reader with powerful controls & full functions❤️阅读3.0, 阅读是一款可以自定义来源阅读网络内容的工具&#xff0c;为广大网络文学爱好者提供一种方便…...

风电调频翻车实录:当虚拟惯性遇上二次跌落

双馈风力电机虚拟惯性控制下垂控制三机九节点一次调频模型 [1]系统为三机九节点模型&#xff0c;所有参数已调好且可调&#xff0c;可直接运行&#xff0c;风电渗透率19.4% [2]风机采用虚拟惯性下垂控制&#xff0c;转速回复模块&#xff0c;在系统频率跌落时释放转子动能提供有…...