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

目录

    • 简介
    • 微任务与宏任务的基本概念
      • 宏任务(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异步编程的基石。
  • 微任务提供了一种更快的异步处理方式,通常用于快速连续的异步操作,而宏任务则包括了更广泛的异步事件。

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

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

相关文章

Autogen和Crewai的对比

AutoGen和CrewAI是两种用于开发人工智能Agent应用的框架,各有其独特的特性和优势。以下是对这两者的详细对比: 共同点 编程语言:两者都使用Python编程语言。应用领域:都用于创建人工智能Agent应用程序。多代理对话:都…

Qt+MySQL实现社团管理系统

开发环境 ● Qt 5.14.1 ● Win10 ● Mysql 5.7.28 系统介绍 系统主要实现的功能如下图所示 社团管理系统主要包含了以下几个亮点功能 轮播图显示社团信息支持excel形式的导入导出学生信息权限控制(管理员、超级管理员、用户) 系统效果展示 登录界面…

AI学习指南机器学习篇-层次聚类合并策略

AI学习指南机器学习篇-层次聚类合并策略 在机器学习领域,层次聚类(Hierarchical Clustering)是一种常用的聚类方法,它通过不断合并相似的聚类来构建聚类层次结构。在层次聚类中,聚类合并策略是非常关键的一环&#xf…

前端工程化(01):Webpack、Gulp、Grunt三大自动化构建工具对比

10年前端开发和UI设计老司机→贝格前端工场,为您分享。本期介绍三款自动化构建工具,看看他们的工作原理和差异化,帮助你来选择。 Webpack、Gulp和Grunt都是前端构建工具,用于优化前端开发流程和提高开发效率。它们都可以自动化执…

c++ 的(引用)和*(指针)

在C中,&(引用)和*(指针)在函数参数中的使用有各自的特点和用途。下面是它们的具体使用方式以及它们之间的一些区别: 引用(&) 使用方式: 引用作为函数参数时,可…

Java8新语法

一、Java8新特性 JDK 8 正式版在 2013 年 9 月份发布。 Java8主要内容Lambda表达式函数式接口方法引用与构造器引用Stream API接口中的默认方法与静态方法新时间日期API其他新特性Java8新特性简介: 速度更快代码更少(增加了新的Lambda表达式)强大的Stream API便于并行最大化减少…

c++栈内存和堆内存的基本使用

c栈内存和堆内存的基本使用 #include <iostream>// 定义一个简单的结构体 struct Person {std::string name;int age; };int main() {// 栈内存分配int a 10; // 基本数据类型的栈内存分配Person person; // 结构体的栈内存分配person.name "John";person.a…

构建未来对话:从零开始实现基于Vue 3的AI聊天页面

大家好&#xff0c;今天我们将一起探索如何从零开始&#xff0c;使用Vue 3构建一个AI对话页面。这个过程不仅会让我们了解Vue 3的新特性&#xff0c;还会让我们对构建交互式Web应用有一个全新的认识。如果你是编程新手&#xff0c;别担心&#xff0c;我会用通俗易懂的语言&…

【Linux命令基础】vim的简介

文章目录 前言如何在Ubuntu中安装VimVim的作用Vim的优势vim的模式总结前言 在Linux环境中,我们经常需要编辑文本文件,无论是编写代码,还是修改配置文件。而在这些场景中,Vim编辑器无疑是我们的得力助手。Vim是从vi发展出来的一个文本编辑器,代码补全、编译及错误跳转等方…

HarmonyOS(43) @BuilderParam标签使用指南

BuilderParam BuilderParam使用举例定义模板定义具体实现BuilderParam初始化 demo源码参考资料 BuilderParam 该标签有的作用有点类似于设计模式中的模板模式&#xff0c;类似于指定一个UI占位符&#xff0c;具体的实现交给具体的Builder&#xff0c;顾名思义&#xff0c;可以…

SpringBoot项目架构实战之“网关zuul搭建“

第三章 网关zuul搭建 前言&#xff1a; 1、主要功能 zuul主要提供动态路由&#xff08;内置ribbon实现&#xff09;和过滤&#xff08;可以做统一鉴权过滤器、灰度发布过滤器、黑白名单IP过滤器、服务限流过滤器&#xff08;可以配合Sentinel实现&#xff09;&#xff09;功能…

学会创建虚拟网卡

此电脑-----管理 一直点击下一页 选择网络适配器 选择Microsoft----Microsoft KM-TEST环回适配器 然后点击下一页 完成的界面如下&#xff1a; 手动改IP

Git分支结构

目录 1. 线性分支结构 2. 分叉与合并结构 3. 分支与标签的关系 4. 并行开发与分支管理策略 测试&#xff08;本机系统为Rocky_linux9.4&#xff09; 合并失败解决 删除分支 删除本地分支 删除远程分支 Git 中的分支结构是版本控制中非常重要的概念之一&#xff0c;它描…

政安晨:【Keras机器学习示例演绎】(五十四)—— 使用神经决策森林进行分类

目录 导言 数据集 设置 准备数据 定义数据集元数据 为训练和验证创建 tf_data.Dataset 对象 创建模型输入 输入特征编码 深度神经决策树 深度神经决策森林 实验 1&#xff1a;训练决策树模型 实验 2&#xff1a;训练森林模型 政安晨的个人主页&#xff1a;政安晨 欢…

Python | Leetcode Python题解之第228题汇总区间

题目&#xff1a; 题解&#xff1a; class Solution:def summaryRanges(self, nums: List[int]) -> List[str]:def f(i: int, j: int) -> str:return str(nums[i]) if i j else f{nums[i]}->{nums[j]}i 0n len(nums)ans []while i < n:j iwhile j 1 < n …

Codeforces Round #956 (Div. 2) and ByteRace 2024 E. I Love Balls(概率期望)

题目 思路来源 官方题解 题解 特殊球不会改变普通球的顺序&#xff0c;所以都是alice拿一半里较多的部分 n-k1一半向上取整就是(n-k2)/2&#xff0c;同理n-k个一般向上取整(n-k1)/2 每个特殊球独立地来看&#xff0c;在每个空隙的概率相同 所以分别统计特殊球和非特殊球的…

LLM+Agent技术

&#x1f4a1; Agent可以理解为某种能自主理解、规划决策、执行复杂任务的智能体。Agent 是让 LLM 具备目标实现的能力&#xff0c;并通过自我激励循环来实现这个目标。它可以是并行的&#xff08;同时使用多个提示&#xff0c;试图解决同一个目标&#xff09;和单向的&#xf…

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

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

探索AI数字人的开源解决方案

引言 随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;AI数字人&#xff08;或虚拟人&#xff09;正逐渐走进我们的生活&#xff0c;从虚拟助手到虚拟主播&#xff0c;再到虚拟客服&#xff0c;AI数字人在各个领域展现出巨大的潜力。开源解决方案的出现&…

解码生命语言:Transformer模型在基因序列分析的突破性应用

解码生命语言&#xff1a;Transformer模型在基因序列分析的突破性应用 基因序列分析是现代生物学和医学研究的基石&#xff0c;它涉及对DNA或RNA序列的识别、比较和解释。随着深度学习技术的兴起&#xff0c;特别是Transformer模型的出现&#xff0c;基因序列分析领域迎来了新…