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

目录

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch:Node.js ECS 日志记录 - Morgan

这是之前系列文章: Elasticsearch:Node.js ECS 日志记录 - Pino Elasticsearch:Node.js ECS 日志记录 - Winston 中的第三篇文章。在今天的文章中,我将描述如何使用 Morgan 包针对 Node.js 应用进行日子记录。此 Morgan Node.j…

SpringCloud学习

认识微服务 1.单体架构:将业务的所有功能集中在一个项目中开发,打成一个包部署 优点:架构简单 部署成本低 缺点:耦合度高 2.分布式架构:根据业务功能对系统进行拆分,每个业务模块作为独立项目开发&…

使用来此加密申请多域名SSL证书

在数字化时代的浪潮中,网站的安全性已成为企业和个人不可或缺的一部分。特别是在数据传输和用户隐私保护方面,SSL证书的作用愈发显著。 申请多域名SSL证书步骤 1、登录来此加密网站,输入域名,可以勾选泛域名和包含根域。 2、选择…

【结构型模式-代理模式】

概述 由于某些原因需要给某对象提供一个代理以控制该对象的访问。这时,访问对象不适合或者不能直接引用目标对象,代理对象作为访问对象与目标对象之间的中介。 Java中的代理按照代理类生成时机不同又分为静态代理和动态代理。静态代理代理类在编译期就生…

手撸俄罗斯方块(五)——游戏主题

手撸俄罗斯方块(五)——游戏主题 当确定游戏载体(如控制台)后,界面将呈现出来。但是游戏的背景色、方块的颜色、方框颜色都应该支持扩展。 当前游戏也是如此,引入了 Theme 的概念,支持主题的扩…

ADS基础教程24 - Gerber文件的导入

EM介绍 一、引言二、基本概念1.仿真文件下载2.仿真文件介绍 二、导入步骤1.新建workspace2.选择Layout结构3.导入设计4.选择文件类型5.导入文件6.预览文件内容7.铜皮离散问题 四、总结 一、引言 本章节开始介绍在ADS中进行PCB仿真,首先讲解如何将Gerber文件导入到A…

顺序结构 ( 四 ) —— 标准数据类型 【互三互三】

序 C语言提供了丰富的数据类型,本节介绍几种基本的数据类型:整型、实型、字符型。它们都是系统定义的简单数据类型,称为标准数据类型。 整型(integer) 在C语言中,整型类型标识符为int。根据整型变量的取值范…

【RHCE】基于用户认证和TLS加密的HTTP服务(HTTPS)

目录 一、创建用户账号 二、TLS加密 三、配置http服务子配置文件 四、创建访问http服务的文件夹以及输入重定向到文件 五、配置Linux本地仓库以及Windows下的本地仓库 六、基础操作 七、测试 一、创建用户账号 用户认证 # 创建两个账户 [rootlocalhost ~]# htpasswd -…

YOLOv10改进 | 损失函数篇 | SlideLoss、FocalLoss、VFLoss分类损失函数助力细节涨点(全网最全)

一、本文介绍 本文给大家带来的是分类损失 SlideLoss、VFLoss、FocalLoss损失函数,我们之前看那的那些IoU都是边界框回归损失,和本文的修改内容并不冲突,所以大家可以知道损失函数分为两种一种是分类损失另一种是边界框回归损失,…

【安全设备】数据库审计

一、什么是数据库审计 数据库审计(简称DBAudit)是一种以安全事件为中心,实时记录网络上的数据库活动,并对数据库操作进行细粒度审计的合规性管理技术。它通过对用户访问行为的记录、分析和汇报,帮助用户事后生成合规报…

一套基于 Ant Design 和 Blazor 的开源企业级组件库

前言 今天大姚给大家分享一套基于Ant Design和Blazor的开源(MIT License)、免费的企业级组件库(喜欢Ant Design风格的同学推荐使用):Ant Design Blazor。 项目特性 提炼自企业级中后台产品的交互语言和视觉风格。 开…

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

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

《Windows API每日一练》9.1.5 自定义资源

自定义资源(Custom Resources)是在 Windows 程序中使用的一种资源类型,用于存储应用程序特定的数据、图像、音频、二进制文件等。通过自定义资源,开发者可以将应用程序所需的各种资源文件集中管理和存储,便于在程序中访…

华为HCIP Datacom H12-821 卷34

1.单选题 防火墙默认已经创建了一些安全区域,以下哪一个安全区域不是防火墙上默认存在的? A、Trust B、DMZ C、Internet D、Local 正确答案: C 解析: 防火墙默认情况下为我们提供了三个安全区域,分别是 Trust、DMZ和Untrust 2.判断题 …

【RHCE】实验(HTTP,DNS,SELinux,firewalld的运用)

一、题目 二、主服务器配置 1.下载HTTP服务,DNS服务 [rootlocalhost ~]# yum install -y httpd bind 2.开启防火墙,放行服务 # 开启防火墙 [rootlocalhost ~]# systemctl start firewalld # 放行服务 [rootlocalhost ~]# firewall-cmd --add-service…

日常学习-20240710

1、一次一千万条数据插入和删除案例: 第一次:插入--批量插入,每次插入5000条数据,总耗时28min,数据无异常 删除--通过sql语句一次性删除,总耗时1h52min;一次删除的数据过多导致mysql的备份恢复文件极其庞大&#xff0…

在CentOS7虚拟机上使用Ollama本地部署Llama3大模型中文版+Open WebUI

一、创建虚拟机 1.1按照常规的CentOS教程来安装就行,我用的是以下版本: VMware版本:VMware Workstation Full v12.1.0-3272444 中文正式版 镜像版本:CentOS-7-x86_64-DVD-2009 1.2虚拟机配置参数,如下: 二…

彩虹小插画:成都亚恒丰创教育科技有限公司

彩虹小插画:色彩斑斓的梦幻世界 在繁忙的生活节奏中,总有一抹温柔的色彩能悄然触动心弦,那就是彩虹小插画带来的梦幻与宁静。彩虹,这一自然界的奇迹,被艺术家们巧妙地融入小巧精致的插画之中,不仅捕捉了瞬…

Camera Raw:直方图

Camera Raw 的直方图 Histogram面板不仅提供了照片亮度和色彩分布信息,还具备多项实用功能,辅助评估和调整照片。 ◆ ◆ ◆ 直方图的构成 直方图是一个二维坐标系统,横坐标表示不同程度的像素亮度,从左到右通常对应的是 0 ~ 255…

14-60 剑和诗人34 - Kubernetes 是部署 LLM 的首选平台

​​​​ 介绍 近年来,大型语言模型 (LLM) 一直在彻底改变自然语言处理领域。从 GPT-3 到 PaLM 等,这些模型可以生成类似人类的文本、回答问题、总结文档等等。然而,训练和部署 LLM 需要大量的计算。随着这些模型的规模和能力不断增长&#…