EventLoop宏任务和微任务的执行顺序，先执行宏任务再执行微任务！

最新推荐文章于 2024-04-12 20:00:55 发布
最新推荐文章于 2024-04-12 20:00:55 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： VUE细节 Vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47000305/article/details/119875634
版权
前端 同时被 3 个专栏收录
69 篇文章 2 订阅
订阅专栏
Vue
56 篇文章 3 订阅
订阅专栏
VUE细节
46 篇文章 2 订阅
订阅专栏

答：宏任务先执行然后再执行微任务。因为script是一个大的宏任务！

首先你需要了解任务分类，在js中任务分为同步任务和异步任务，为什么这么搞？因为js是单线程的，为什么是单线程的？因为js设计之初是为了解决页面交互的，一种脚本没必要那么复杂，其次如果js设计成多线程的，会有很大的问题，多线程要考虑线程之间的资源抢占，死锁，冲突之类的，加入你在操作一个dom节点把它改成了红色，然后另一个线程把它删除掉了，这时你就会完全懵掉。

什么是宏任务，什么是微任务？

微任务设计的目的简单讲就是为了插队！
微任务在宏任务后调用，微任务会在下一个宏任务执行之前全部处理完再执行EventLoop，
所以如果有新的宏任务需要等待上一个eventLoop中的微任务执行完，这时如果你不想等到下一个宏任务之后执行某个事，你可以使用微任务的方式将你要做的插到当前eventloop中的微任务中，待所有微任务执行完毕再去开启下一个新的宏任务～～～

小张很嚣张～
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
JS事件循环机制event loop宏任务微任务原理解析
10-14
而微任务，如Promise、process.nextTick，会在当前同步任务执行完后，下一个宏任务执行前立即执行。这种设计允许JavaScript快速响应并处理一些紧急任务，而无需等待整个宏任务完成。 回到给定的代码示例： ```...
宏任务和微任务的执行顺序
m0_73727623的博客
01-13 4751
在同一次循环中，微任务不参与事件循环，微任务会被推到当前循环对应的微任务队列中，即使是微任务中的微任务。宏任务将开启新的事件循环。
微任务和宏任务哪个先执行?
qq_59737146的博客
01-31 5617
微任务宏任务执行顺序
微任务和宏任务
最新发布
m0_51496828的博客
04-12 207
宏任务和微任务表示异步任务的两种分类宏任务：包括整体代码script(可以理解为外层同步代码)、settimeout、setInterval、i/o(输入输出)、ui render(将页面元素渲染成用户可见的界面的过程)微任务：promise、object.observe、MutationObserver(监听DOM树的变化)
js的宏任务与微任务
czlj1998的博客
09-23 324
当用户与页面进行交互时，浏览器会触发相应的事件，并执行对应的事件处理函数。具体来说，当一个宏任务执行完毕后，会立即检查微任务队列中是否有待执行的微任务。如果有，则按照先进先出的顺序依次执行所有的微任务，直到微任务队列为空。然后才会执行下一个宏任务。这意味着，即使有多个宏任务在排队等待执行，在执行下一个宏任务之前，都会先执行完所有的微任务。在事件循环中，微任务比宏任务具有更高的优先级，因此微任务会先于宏任务执行。因此，在这个例子中，微任务先于宏任务执行，输出顺序是1、4、3、2。
宏任务与微任务执行顺序（超详细讲解）
~朴：shu的博客
02-27 6406
写此之前，也查阅了很多文章，并结合自己的理解，说说对Event Loop模型的理解、以及对在任务队列中的影响进行了分析，也给出了多种情形的任务案例以及分析解释，相信大家看完会有所收获；当然，也是自己的理解，难免有所偏差，欢迎大家指正~
干货：宏任务和微任务执行顺序详解
frontend_frank的博客
04-10 1521
最近看了死月的 趣学 Node.js 小册，关于宏任务、微任务部分突然意识到所谓的执行顺序其实就是底层 C++ 写的各种代码的结果，当了解了 Node.js 代码或者 V8 代码再看这些问题真的就是降维打击（当然我只是有了这个感觉，还没细看过[旺柴]）。但如果平常用不到，我们也没必要真的去看底层的代码，即使不了解底层代码，我们也可以根据具体的表现来自己定一些规则进行理解，只要根据这个规则来判断...
EventLoop执行顺序.zip
02-03
EventLoop执行顺序： EventLoop执行顺序的流程图 EventLoop执行顺序的PDF文档
JavaScript事件循环及宏任务微任务原理解析
10-14
同步任务是按顺序执行的，而异步任务分为宏任务（MacroTask）和微任务（MicroTask）。 宏任务主要包括：整个脚本、setTimeout、setInterval等。这些任务会在主线程空闲时从任务队列中取出执行。值得注意的是，...
20200103-王正正-js的执行顺序和闭包的探究.docx
07-10
微任务则包括Promise、process.nextTick等，它们在当前宏任务执行完毕后，但在下一个宏任务开始前执行。 例如，以下代码展示了事件循环的工作原理： ```javascript console.log(1); setTimeout(function () { ...
JS异步宏队列微队列原理详解
10-14
JavaScript中的异步处理机制是基于事件循环（Event Loop）的，这一机制涉及到宏队列（Macro Task Queue）和微队列（Micro Task Queue）的概念。理解这两个队列的工作原理对于编写高性能、非阻塞的前端代码至关重要。...
宏任务和微任务
Tiger's blog
11-05 9187
宏任务与微任务 1.同步任务和异步任务 JavaScript是单线程执行的语言，在同一个时间只能做一件事情。这就导致后面的任务需要等到前面的任务完成才能执行，如果前面的任务很耗时就会造成后面的任务一直等待。为了解决这个问题JS中出现了同步任务和异步任务。 （1）同步任务 在主线程上排队执行的任务只有前一个任务执行完毕，才能执行后一个任务，形成一个执行栈。 （2）异步任务 不进入主线程，而是进入任务队列，当主线程中的任务执行完毕，就从任务队列中取出任务放进主线程中来进行执行。由于主线程不断重复的获得任务、执行
宏任务与微任务的执行顺序
weixin_51042892的博客
03-06 1572
同步任务>微任务>宏任务 举例： setTimeout(()=>{ console.log('settimeout'); },0); new Promise(resolve=>{ resolve(); console.log("day day up"); }).then(value=>console.log("good good study"));
Javascript---宏任务与微任务,代码执行顺序你是否搞清了
COCOLI_BK的博客
04-28 5037
利用alert弹窗会阻碍dom渲染代码执行，来验证微任务与宏任务的执行是在dom渲染前或后 为什么了解执行的顺序和时机？ 可以判定使用什么函数去处理代码； 比如：你需要再dom渲染之前做好逻辑处理，等待dom渲染完毕后，展示于页面，此时必用微任务方式处理，必正确;反之需要获取dom的操作就需要采用宏任务的相关代码去包裹处理函数，才不至于获取不到元素而报错！！！ 首先说明下哪些是宏任务，哪些是微任务？（关键的分类） /****宏任务*****/ // setTimeout、setInterva.
宏任务、微任务
热门推荐
xiaoxu的博客
10-10 1万+
宏任务与微任务？ B-树中含511个关键字，B-树为3阶，则包含叶子节点层该树最大深度为？ 8 9 10 11
JavaScript宏任务(macrotask)和 微任务(microtask) 执行顺序
^_^
06-14 1万+
一、JavaScript单线程 JavaScript是单线程指的是同一时间只能干一件事情，只有前面的事情执行完，才能执行后面的事情。导致遇到耗时的任务时后面的代码无法执行。 在此之前啊 我们必须了解同步和异步 1. 同步任务（synchronous） console.log(123); console.log(456); for (let i = 1; i <= 5; i++) { console.log(i); } 顾名思义 得到的一定是..
宏任务、微任务的执行顺序
qq_41915137的博客
06-27 1248
宏任务、微任务的执行顺序 执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。 ...
01-javascript微任务和宏任务谁先执行
weixin_45553259的博客
01-28 1052
微任务、宏任务
事件循环中的宏任务和微任务执行顺序
苦涩精灵的博客
11-15 8093
事件循环中的宏任务和微任务执行顺序 先来了解一下事件循环、宏任务、微任务和Promise 1.事件循环（Event Loop）运行机制 执行一个宏任务（栈中没有就从事件队列中获取） 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行） 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取） 2.宏任务、微任务 执行顺序： 先宏后微 宏任务（发起者:宿主（Node、
js宏任务和微任务
05-24
在 JavaScript 中，事件循环（Event Loop）是一个非常重要的概念。事件循环是一种机制，用于执行异步任务，以保证 JavaScript 在单线程的情况下能够处理多个任务。 在事件循环中，我们通常将任务分为宏任务（macro task）和微任务（micro task）两类。 宏任务是由浏览器或 Node.js 的 API 提供的异步任务，例如 setTimeout、setInterval、requestAnimationFrame、I/O 操作等。这些任务会被添加到任务队列（task queue）中，当主线程执行完当前任务后，会从队列中取出一个宏任务执行，直到队列为空。 微任务则是在当前任务执行结束后立即执行的异步任务，例如 Promise 的回调函数、MutationObserver 的回调函数等。这些任务会被添加到微任务队列（microtask queue）中，当主线程执行完当前任务后，会从微任务队列中按顺序取出所有任务执行，直到队列为空。 需要注意的是，微任务的执行优先级高于宏任务，也就是说，在执行宏任务过程中，如果有微任务需要执行，会先执行完所有微任务，然后再执行下一个宏任务。 下面是一个示例代码，用于演示宏任务和微任务的执行顺序： ```javascript console.log('start'); setTimeout(() => { console.log('setTimeout'); }, 0); Promise.resolve().then(() => { console.log('Promise'); }); console.log('end'); ``` 上述代码中，先执行同步代码，输出 `start` 和 `end`，然后将 `setTimeout` 函数添加到宏任务队列中，并将 Promise 的回调函数添加到微任务队列中。最后，按顺序取出微任务队列中的任务，输出 `Promise`，再取出宏任务队列中的任务，输出 `setTimeout`。 输出结果如下： ``` start end Promise setTimeout ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小张很嚣张～

支持一下小老弟吧～

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值