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

news/2024/10/23 5:50:54/

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

可以分为三类:

  • 宏任务
    • 定时器任务
    • 用户交互事件任务(鼠标事件、键盘事件)
    • 网络请求任务
    • 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; 答…