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

可以分为三类:

  • 宏任务

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

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

宏任务有以下几个特点:

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

微任务由以下几个特点:

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

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

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

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

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

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

  1. 一文读懂前端与HTML5技术的区别!

    现在好多人都把HTML5和前端的概念弄混淆了.例如,H5是HTML5的简称,而现在好多人把HTML5看成了是前端开发的总称.今天就为各位普及一下,到底前端和HTML5有哪些区别? 什么是前端开发 以一 ...

  2. 【第1398期】一文读懂前端缓存

    言 有点长,要是坐地铁的话注意时间.今日早读文章由百度@小蘑菇哥哥投稿分享. @小蘑菇小哥,百度上海研发中心资深前端工程师,pwa开源解决方案lavas作者,百度mip核心开发者 正文从这开始-- 大 ...

  3. 一文读懂前端技术演进:盘点Web前端20年的技术变迁史

    本文原文由作者"司徒正美"发布于公众号"前端你别闹",即时通讯网收录时有改动,感谢原作者的分享. 1.引言 1990 年,第一个Web浏览器的诞生:1991 年 ...

  4. 一文看懂前端和后端开发

    作为一名开发者,你可能会想:2021 年最好的软件开发技术和编程语言会是什么?它们又是如何被应用在软件开发当中的?如果你在思考这个问题,那就来对地方了.这篇文章将对前端和后端开发技术做一个对比,先从基 ...

  5. 前端面试必会 | 一文读懂 JavaScript 中的 this 关键字

    this 是一个令无数 JavaScript 编程者又爱又恨的知识点.它的重要性毋庸置疑,然而真正想掌握它却并非易事.希望本文可以帮助大家理解 this. JavaScript 中的 this Jav ...

  6. [SLAM前端系列]——一文读懂ICP

    今天突然发现这篇博客写的并不详细,配不上一文读懂这四个字,特此回来更新. 我们知道SLAM可以用2D/3D雷达或者相机实现(视觉SLAM).由于笔者是激光SLAM工程师,所以本文的ICP都是在激光雷达 ...

  7. python开发前端后端区别_一文看懂前端和后端开发

    作为一名开发者,你可能会想:2019 年最好的软件开发技术和编程语言会是什么?它们又是如何被应用在软件开发当中的?如果你在思考这个问题,那就来对地方了.这篇文章将对前端和后端开发技术做一个对比,先从基 ...

  8. python前端开发和后端开发工程师_一文看懂前端和后端开发

    作为一名开发者,你可能会想:2019 年最好的软件开发技术和编程语言会是什么?它们又是如何被应用在软件开发当中的?如果你在思考这个问题,那就来对地方了.这篇文章将对前端和后端开发技术做一个对比,先从基 ...

  9. 一文读懂多分类的评价指标(微平均、宏平均、加权平均)

    做CRF的时候会碰到多分类下的评价指标,记录一下 二分类的情况下可以参考二分类评价标准 以一个三分类举例 三分类的混淆矩阵如下 对于猫来说 recall(猫) = 4/6 = 0.66 precisi ...

最新文章

  1. 御泥坊搜索引擎优化网络诊断_掌握以下这些网络营销搜索引擎优化技巧,你的排名想不靠前都难!...
  2. Java:log4j:WARN no appenders could be found for logger问题解决
  3. OpenGL Texture Wrap Modes纹理包裹模式的实例
  4. intellij出现dependency ‘xxx‘not found
  5. 深度工作:充分使用每一份脑力
  6. [MyBatisPlus]代码生成器
  7. python创建变量score_关于Python创建类时的self参数和__init__
  8. SLAM Cartographer(15)位姿图
  9. 哈啰单车突发网络故障 网友上班迟到狂吐槽
  10. Generator 实现
  11. echarts画图实例讲解
  12. Oracle基础函数
  13. Activity not started, its current task has been brought to the front 。
  14. 设计模式------简单工厂模式
  15. Win10如何将语言栏移回右下角
  16. React Suspense lazy
  17. 请客人(客户)吃饭谈点什么好?
  18. PoisonIvy Rat 远程溢出实战
  19. 基于AI的自动化处理
  20. excel插入行 uipath_UIPath入門系列三之操作Excel表格

热门文章

  1. 请输入班级人数,然后输入每个人的语文数学和英语成绩,并且打印出语文的两个最高分,数学的两个最低分。和英语的平均分(使用二维数组)
  2. mac hosts修改工具:SwitchHosts Mac的中文设置
  3. 硬件开发之pcb---PCB抗干扰设计原则
  4. Java中arraylist和数组的相互转换
  5. 如何在网页中使用阿里图标iconfont(2022最新版详细)
  6. 画渐变色的C++代码
  7. 国芯方案——胎压计芯片方案SIC8632
  8. 拒绝毒瘤:推特正试图让“回复人”闭嘴
  9. 读书笔记 Believe It to Achieve It by Brian Tracy and Christina Stein, Ph.D.
  10. 沙盘软件测试题,Sandboxie沙盘工具,免费的沙盒虚拟环境软件、隔离测试、多开程序...