宏任务和微任务的执行顺序是怎样的

简介: 宏任务和微任务的执行顺序是怎样的

宏任务(macro-task)和微任务(micro-task)在事件循环中的执行顺序如下:

  1. 当执行脚本开始时,会先执行一个宏任务(通常是脚本本身)。
  2. 执行完当前宏任务后,检查微任务队列。
  3. 如果微任务队列不为空,则按照先进先出的顺序依次执行所有微任务,直到微任务队列为空。这意味着微任务会在下一个宏任务之前执行。
  4. 当前宏任务执行完毕后,浏览器会渲染页面更新UI。
  5. 检查是否有新的宏任务进入事件队列。如果有,则选择最早进入队列的宏任务,并执行它。如果队列为空,则继续等待新的宏任务进入队列。
  6. 重复步骤2-5,循环执行宏任务和微任务。

简而言之,微任务会在当前宏任务执行完毕后立即执行,而宏任务则需要等待当前宏任务执行完毕后,再从宏任务队列中选择下一个宏任务执行。

注意:在某些情况下,宏任务执行期间可能会产生新的微任务,这些新的微任务会被添加到微任务队列中,并在当前宏任务执行完毕后立即执行。这意味着微任务可能会被插入到宏任务之间执行。这种情况下,微任务优先级高于宏任务。

相关文章
|
6月前
|
前端开发 JavaScript API
宏任务与微任务执行顺序及对比记录
宏任务与微任务执行顺序及对比记录
190 0
|
6月前
|
JavaScript 前端开发
微任务与宏任务的区别
微任务与宏任务的区别
|
6月前
|
前端开发 JavaScript UED
|
前端开发 JavaScript
30 # 宏任务和微任务的区分
30 # 宏任务和微任务的区分
51 0
|
2月前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
17小时前
|
存储 前端开发 JavaScript
微任务和宏任务有什么区别
微任务和宏任务是JavaScript异步编程中的两个概念。宏任务包括整体代码块、setTimeout等,微任务有Promise、MutationObserver等。主要区别在于执行时机:每次事件循环中,宏任务只执行一个,而微任务会在当前宏任务结束后、下一个宏任务开始前全部执行完毕。
|
17小时前
|
前端开发 JavaScript
宏任务和微任务在浏览器渲染过程中的执行顺序
宏任务和微任务是浏览器事件循环中的两种任务类型。宏任务包括整体代码块、setTimeout等,微任务有Promise.then、MutationObserver等。每个宏任务执行完毕后,会先执行完所有微任务,再进行下一轮渲染或执行下一个宏任务。
|
1月前
|
JavaScript 前端开发 调度
在JavaScript中异步任务里的微任务和宏任务的特点和生命周期
在JavaScript中异步任务里的微任务和宏任务的特点和生命周期
42 0
|
6月前
|
前端开发 JavaScript
微任务与宏任务
微任务与宏任务
32 1
|
6月前
|
JavaScript 前端开发
前端 JS 经典:宏任务、微任务、事件循环(EventLoop)
前端 JS 经典:宏任务、微任务、事件循环(EventLoop)
56 0