欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 资讯 > 宏任务和微任务的区别是什么

宏任务和微任务的区别是什么

2024/12/22 2:06:38 来源:https://blog.csdn.net/qq_64946501/article/details/144396764  浏览:    关键词:宏任务和微任务的区别是什么
  1. 任务性质和执行时机
    • 宏任务(Macrotask)
      • 宏任务是一个比较完整的任务单元,它代表在事件循环中每次执行的一个较大的任务块。例如,在浏览器环境下,包括加载和执行一个脚本文件(script)、处理setTimeoutsetInterval定时器回调、执行UI渲染(重绘和回流)以及I/O操作等都是宏任务。
      • 执行顺序上,每次事件循环首先执行一个宏任务。在执行宏任务过程中,如果又产生了新的宏任务,会将新的宏任务添加到宏任务队列的末尾,等待下一次循环执行。例如,在一个script标签内的代码是一个宏任务,当这个脚本在执行过程中设置了一个setTimeout,这个setTimeout的回调函数就会作为一个新的宏任务被添加到宏任务队列。
    • 微任务(Microtask)
      • 微任务是在当前宏任务执行结束后,在开始下一个宏任务之前立即执行的小任务。它主要用于处理一些需要在当前事件循环周期内尽快完成的异步操作。比如Promisethencatchfinally方法注册的回调函数,以及MutationObserver(用于监听DOM变化)等操作产生的任务都是微任务。
      • 当一个宏任务执行到最后,JavaScript 引擎会检查微任务队列。如果微任务队列中有任务,就会依次执行这些微任务,直到微任务队列为空,然后才会进行下一个宏任务的执行。例如,在一个script宏任务执行过程中,创建了一个Promise并添加了then回调,这个then回调会作为微任务在当前宏任务结束后立即执行。
  2. 对程序执行流程的影响
    • 宏任务的影响
      • 由于宏任务的执行相对是比较完整的任务单元,它的执行时间可能会比较长。例如,一个setInterval定时器每隔一段时间就会产生一个宏任务,如果这个定时器的回调函数执行时间较长,就可能会阻塞后续宏任务的执行,导致程序出现延迟或者卡顿的现象。在浏览器中,UI渲染也是宏任务,如果JavaScript代码执行时间过长,可能会导致UI渲染不及时,影响用户体验。
      • 宏任务的执行可以被看作是事件循环中的主要步骤,它们的执行顺序和时间间隔(如setTimeoutsetInterval)可以在一定程度上控制程序的整体流程和节奏。例如,通过合理设置定时器的时间,可以实现定时执行某些功能,如轮播图的自动切换等。
    • 微任务的影响
      • 微任务的存在是为了在不打断当前宏任务执行流程的基础上,及时处理一些异步操作的结果。因为它们会在当前宏任务结束后立即执行,所以可以确保某些异步操作的后续处理能够尽快完成。例如,一个Promise用于异步获取数据,当数据获取成功后,通过then方法注册的微任务可以立即对数据进行处理,而不需要等到下一个宏任务阶段。
      • 不过,如果微任务队列中积累了大量的微任务,也会导致当前宏任务结束后需要花费较长时间来处理这些微任务,从而延迟下一个宏任务的开始时间。这种情况可能会出现在频繁创建和处理Promise的复杂应用中。
  3. 应用场景和使用目的
    • 宏任务的应用场景
      • 定时器相关功能setTimeoutsetInterval常用于实现延迟执行某个操作或者周期性地执行某个操作。例如,实现一个倒计时功能,就可以使用setTimeout来每秒更新倒计时的显示。
      • I/O 操作:在服务器端的Node.js环境中,I/O操作(如文件读取、网络请求等)作为宏任务处理。这是因为I/O操作通常比较耗时,将它们作为宏任务可以让程序在等待I/O结果的同时,继续执行其他不依赖于这个I/O结果的任务。
      • UI 渲染(浏览器):浏览器会在适当的宏任务阶段进行UI渲染,以更新页面的显示。这包括对DOM元素的添加、删除、修改后的重绘和回流操作。
    • 微任务的应用场景
      • 异步操作的后续处理Promise是最典型的应用场景。当使用Promise进行异步操作(如fetch请求数据)时,thencatchfinally方法用于在异步操作完成(成功或失败)后立即进行后续处理,这些处理作为微任务执行。
      • DOM 变化监听(浏览器)MutationObserver用于监听DOM元素的变化,它产生的任务是微任务。这使得在DOM元素发生变化后能够及时进行相应的处理,例如,动态加载JavaScript模块后,通过MutationObserver监听script标签的插入,在微任务阶段可以对新插入的script进行初始化等操作。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com