什么是前端宏任务,什么又是前端微任务呢?一文读懂前端微任务宏任务。

news/2023/12/4 13:54:57

在前端中,宏任务和微任务是异步任务的两种不同类型。
前端有很多中异步任务类型。

可以分为三类:

  • 宏任务
    • 定时器任务
    • 用户交互事件任务(鼠标事件、键盘事件)
    • 网络请求任务
    • I/O操作任务(读写文件)
  • 微任务
    • Promise的回调函数
    • MutationObserver的回调函数(用于监听 DOM 的变动,并在变动发生时执行相应的微任务。)
  • 特殊任务
    • requestAnimationFrame 用于在下一次浏览器重绘之前执行的任务。它通常用于实现流畅的动画效果。(一般将它认定为宏任务,少数资料将其归类为微任务)
    • setImmediate 在 Node.js 环境中提供的宏任务,用于在当前事件循环的末尾立即执行任务。
    • 延迟执行的脚本(<script defer>)在文档解析完成后,按照它们在文档中的顺序延迟执行的脚本。

在一般情况下可以吧异步任务分为这三种,但是在不同环境中也会有不同的判定差异。

宏任务有以下几个特点:

  • 宏任务是由浏览器提哦你给的异步任务
  • 宏任务是会放入宏任务队列中,按照一定的顺序去执行。
  • 当任务队列为空后,事件循环机制会从宏任务队列中取出一个宏任务执行。
  • 宏任务的执行是以完整的、不可中断的方式进行的,执行期间不会执行其他任务。

微任务由以下几个特点:

  • 微任务是相对于宏任务而言的。
  • 微任务会被放入微任务队列中,他的优先级高于宏任务。
  • 当宏任务执行完毕后,事件循环机制会检查微任务队列,并按照顺序执行其中的微任务。
  • 微任务的执行是连续的,知道任务队列清空才会继续执行下一个宏任务。

需要注意的是,微任务具有高优先级,并且可以在同一宏任务中添加多个微任务,它们会在当前宏任务执行完毕后立即执行。而宏任务的执行时机是在当前宏任务执行完毕后,从宏任务队列中取出下一个宏任务执行。

也就是说可以理解为一个宏任务包含了多个微任务。

在一个宏任务中,可能会产生多个微任务。这些微任务会被按照顺序添加到微任务队列中,等待宏任务执行完毕后依次执行。

一旦宏任务执行完成,事件循环会立即检查微任务队列,并按照添加的顺序执行其中的微任务,直到微任务队列为空。然后才会进入下一个宏任务的执行。


http://www.ppmy.cn/news/70451.html

相关文章

TPC 网络通信基础(二)

文件下载利用 tcp原理 Ubuntu 20.04 python3.7 三个python文件 客户端.py 服务器.py 文件.py 客户端充当用户 服务器充当提供下载的服务端 客户端代码&#xff1a; import socketdef main():# 创建套接字tcp_socket socket.socket(socket.AF_INET,socket.SOCKET_…

String StringBuilder常用方法总结

在java中String类不可变的&#xff0c;创建一个String对象后不能更改它的值。所以如果需要对原字符串进行一些改动操作&#xff0c;就需要用StringBuilder类或者StringBuffer类&#xff0c;StringBuilder比StringBuffer更快一些&#xff0c;缺点是StringBuilder不是线程安全的&…

JAVA面试-语法基础- A01

语法基础 面向对象封装继承多态 面向对象 面向对象特性 封装 利用抽象数据类型将数据和基于数据的操作封装在一起&#xff0c;使其构成一个不可分隔的独立实体&#xff0c;数据被保护在抽象数据类型的内部&#xff0c;尽可能的隐藏内部的细节&#xff0c;只保留一些对外的接口…

前端通信-服务端发送事件: SSE(Server-Sent Events)

在日常开发中&#xff0c;我们经常会遇到需要实时获取数据的情况&#xff0c;之前实现这种相似的功能通常都是用ajax长轮询&#xff0c;在HTML5规范中定义了新的通信方式&#xff0c;WebSocket和SSE。websocket相对SSE更常用一些&#xff0c;本文着重来介绍SSE的应用。 SSE AP…

滨州申请专利需要准备哪些材料?

如果你想保护你的一些发明和设计&#xff0c;你可以申请专利。申请专利时&#xff0c;需要提前了解程序和相关流程。那么&#xff0c;申请专利需要准备哪些材料呢&#xff1f;让我们一起仔细看看。 首先&#xff0c;申请专利需要准备哪些材料&#xff1f; (1)外观专利&#xff…

C++学习 Day14

目录 1. 泛型编程 2. 函数模板 2.1 函数模板概念 2.2 函数模板格式 2.3 函数模板的原理 2.4 函数模板的实例化 2.5 模板参数的匹配原则 3. 类模板 3.1 类模板的定义格式 3.2 类模板的实例化 1. 泛型编程 如何实现一个通用的交换函数呢&#xff1f; void Swap(int&a…

德尔玛IPO首日破发,市值蒸发超4亿

今日&#xff08;5月18日&#xff09;&#xff0c;小米“代工厂”广东德尔玛科技股份有限公司&#xff08;下称“德尔玛”&#xff0c;301332.SZ&#xff09;正式在深交所挂牌上市。 德尔玛此次IPO募资净额为12.31亿元&#xff0c;开盘价为14.81元/股&#xff0c;与发行价持平…

【Linux内核解析-linux-5.14.10】文件系统知识点以及解答(建议收藏)

什么是Linux文件系统&#xff1f; 答&#xff1a;Linux文件系统是一种用于管理和组织计算机上数据的方法。它提供了一个层次结构&#xff0c;使用户能够轻松地访问他们的数据&#xff0c;并且支持对数据进行备份、恢复和保护。 Linux中有哪些常见的文件系统类型&#xff1f; 答…

使用 SpringBoot 访问 MySQL 数据库

一、目标 创建一个 MySQL 数据库&#xff0c;构建一个 Spring 应用程序&#xff0c;并将其连接到新创建的数据库。 二、准备工作 1、最喜欢的文本编辑器或 IDE 2、Java 17或更高版本 3、Gradle 7.5或Maven 3.5 三、初始化项目 1、 导航到https://start.spring.io。该服务…

HTTPTomcatServlet学习

HTTP&Tomcat 今日目标&#xff1a; 了解JavaWeb开发的技术栈理解HTTP协议和HTTP请求与响应数据的格式掌握Tomcat的使用掌握在IDEA中使用Tomcat插件理解Servlet的执行流程和生命周期掌握Servlet的使用和相关配置 1. Web概述 1.1 Web和JavaWeb的概念 Web是全球广域网&…

freeswitch的2833和inband对接方案

概述 freeswitch支持三种模式的DTMF传输方式&#xff0c;分别时inband、INFO、2833。 在传统的PSTN网络中&#xff0c;所有的DTMF码都是inband模式&#xff0c;所以VOIP网络和PSTN网络对接中&#xff0c;需要将DTMF码做格式转换&#xff0c;通常是2833和inband之间的转换。 …

Makefile 简易教程

如果你是命令行重度使用者&#xff0c;学习 Makefile 将可以大大提高你的开发效率&#xff0c;下面简单介绍一下 Makefile 的知识和使用方式。 Makefile 是一种包含一组指令来编译和构建软件项目的文件。 Makefile 文件通常包含一组规则和依赖关系&#xff0c;以指定如何将源…

Netty核心组件模块(一)

1.Bootstrap和ServerBootstrap 1>.Bootstrap意思是引导,一个Netty应用通常由一个Bootstrap开始,主要作用是配置整个Netty程序,串联各个组件,Netty中Bootstrap类是客户端程序的启动引导类,ServerBootstrap是服务端启动引导类; 2>.常见的方法有: ①.public ServerBootstr…

【笔试强训选择题】Day13.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01; 文章目录…

spring项目里的大事务优化

编程型事务更加灵活 声明式事务只需要加在方法头加Transactional注解即可开启事务&#xff0c;但是还是不太灵活&#xff0c;意味着整个方法所进行对数据库操作都要加进事务&#xff0c;当然一次查询也要进入事务&#xff0c;这并不是我们想要的&#xff0c;我们在update、ins…

SpringMVC 执行流程

视图阶段&#xff08;老旧JSP等) DispatcherServlet&#xff1a;接收请求、响应结果&#xff0c;所有的请求都要经过它&#xff0c;它是被Tomcat容器初始化的当这个类加载时会加载一些组件类HandlerMapping、HandlerAdapter、ViewResolver等等。 HandlerMapping&#xff1a;根…

mybatis-plus 自动填充的时间跟真实时间相差8小时

项目中 用到了以下两个字段,分别是插入数据时间和更新数据时间&#xff0c;用的mybatis-plus自动填充,结果发现填充的时间跟真实时间相差很多。查了一些资料&#xff0c;找到了解决方案&#xff1a; 1. 下图是我的mysql没有进行配置之前的时区配置,这里的CST包括了4个时区,分别…

泛型类和泛型类是并列的关系

package com.test.test05;import java.util.ArrayList;class Demo{public static void main(String[] args) {Object obj new Object();String s new String();obj s; //多态的一种形式Object[] objArr new Object[10];Object[] strArr new String[10];objArr st…

一种基于非均匀分簇和建立簇间路由的算法的无线传感器网络路由协议(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 本文准备了一种路由方法&#xff0c;该方法使传感器通过有效地使用能量将数据从发送方加载到接收器&#xff0c;因为它在 LEAC…

修为 - 人生感悟

人不为己&#xff0c;天诛地灭。 说明一下&#xff0c;上面说的为己&#xff0c;指的是人的修为。 一个人&#xff0c;在成年之后&#xff0c;需要不断的对自己进行修为的提高。在经历了世事之后&#xff0c;对人生的感悟要不断地进行总结&#xff0c;提高自己的修为。 老祖宗给…
最新文章