什么是之前在eventloop上工作的?微任务还是宏任务？

之前在event loop上工作的是宏任务。在JavaScript中，宏任务是指由浏览器提供的任务队列中的任务，例如用户交互事件、定时器事件、网络请求等。当主线程执行完当前的宏任务后，会检查微任务队列，如果有微任务，则会立即执行微任务队列中的所有任务，然后再执行下一个宏任务。

微任务是指由Promise、MutationObserver等API产生的任务，它们会被添加到微任务队列中。微任务的执行时机在宏任务之前，也就是在当前宏任务执行完毕后，下一个宏任务开始之前。

总结起来，之前在event loop上工作的是宏任务，而微任务则在宏任务执行完毕后立即执行。这种机制保证了JavaScript的异步执行和任务调度的顺序性。

腾讯云相关产品和产品介绍链接地址：

腾讯云函数（云函数）：https://cloud.tencent.com/product/scf
腾讯云消息队列 CMQ：https://cloud.tencent.com/product/cmq
腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云服务器 CVM：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务 TKE：https://cloud.tencent.com/product/tke
腾讯云云安全中心：https://cloud.tencent.com/product/ssc
腾讯云云直播：https://cloud.tencent.com/product/lvb
腾讯云云点播：https://cloud.tencent.com/product/vod
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发平台：https://cloud.tencent.com/product/mpe
腾讯云云存储 COS：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云腾讯会议：https://cloud.tencent.com/product/tcmeeting

相关·内容

JavaScript中的单线程运行，宏任务与微任务，EventLoop

对你不管是复杂还是简单，这其中涉及到的只是点都是一样的。JavaScript单线程，宏任务与微任务，EventLoop。...通过上面的例子，如果能有大概的明白了什么是宏任务，什么是微任务了。...从浏览器角度看，宏任务是一个个离散的，独立的工作单元。...jobs，注意的工作如下微任务是更小的任务，微任务更新应用程序的状态，但是必须在浏览器任务继续执行其他任务之前执行，浏览器任务包括重新渲染页面的UI。...关于 async/await 函数因为，async/await本质上还是基于Promise的一些封装，而Promise是属于微任务的一种。

3.4K4 2

引擎进阶（上）：探究宏任务 & 微任务的运行机制

在开始前请先思考一下：宏任务和微任务分别有哪些方法？宏任务和微任务互相嵌套，执行顺序是什么样的？...所以说宏任务的时间粒度比较大，执行的间隔是不能精确控制的。这就不适用于一些高实时性的需求了，比如后面要讲到的监听 DOM 变化。微任务在理解了宏任务之后，下面我们就可以来看看什么是微任务了。...微任务就是一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前。 ...也就是说在执行微任务过程中产生的新的微任务并不会推迟到下一个循环中执行，而是在当前的循环中继续执行，这点是需要注意的。以上就是微任务的工作流程，从上面的分析我们可以得出如下几个结论。...在一个宏任务中，分别创建一个用于回调的宏任务和微任务，无论什么情况下，微任务都早于宏任务执行。

8531 0

面试官：对于宏任务和微任务，你知道多少？

老规矩，先上图： image.png 梳理这块主要还是为了让自己对代码执行的逻辑能够更加的清晰，当然，某些原因的还是应对一些面试题。什么是宏任务，什么是微任务？...先直接记住结果，再去探究为什么，看到这里应该可以回头去做出来之前那个题了，setTimeout是个宏任务，而pormise是个微任务，「微任务要比宏任务执行的要早」，所以先打印出来300后打印200。...eventloop和DOM渲染 eventloop和DOM渲染是与为什么宏任务比微任务执行的晚有联系的，所以我们先来弄懂这个。...但是我们这里要get的一点是，「我们的眼睛是在什么时刻看到这五段话的」。要了解的一点是：DOM渲染就是将DOM结构或者是js操作的内容渲染到浏览器上，让我们的眼睛可以看见。...宏任务跟微任务分别有哪些？为什么微任务的触发时机更早？微任务宏任务和DOM渲染的关系？微任务宏任务和DOM渲染，在EventLoop中的过程？

6633 0

浏览器和Node.js的EventLoop事件循环机制知多少？

在EventLoop事件队列中有宏任务和微任务队列，分析宏任务和微任务的运行机制，有助于我们理解代码在浏览器中的执行逻辑。那么，我们得思考几个问题：浏览器的EventLoop发挥着什么作用？...Node.js服务端的EventLoop发挥着什么作用？宏任务和微任务分别有哪些方法？宏任务和微任务互相嵌套，执行顺序是什么样的？...微任务的执行时长会影响当前宏任务的时长。在一个宏任务中，分别创建一个用于回调的宏任务和微任务，无论在什么情况下，微任务都早于宏任务执行。...通过调用requestAnimationFrame()方法，我们可以在浏览器下次渲染之前执行回调函数，那么下次渲染具体在什么时间节点呢？渲染和EventLoop又有着什么联系呢？...因此，微任务并不像之前描述的在每一次EventLoop后执行处理，而是在JS函数调用栈清空后处理。

1.5K2 0

我不知道的 Event Loop

EventLoop是MS中的高频问题，理解繁琐，一步小心，步步入坑。 1、本文要点 1、EventLoop是什么？ 2、任务队列是什么？ 3、同步任务和异步任务？ 4、微任务和宏任务？...异步则相反，我并不强依赖你，我对你响应的时间也不敏感，无论你返回还是不返回，我都能继续运行；你响应并返回了，我就继续做之前的事情，你没有响应，我就做其他的事情。...注意：异步并不是Js同时执行两段操作，它只是设定了定时的时间，然后放到任务队列的最后面，然后去执行其他操作，当设定的时间到了之后在把事件拿回来继续执行。 5、微任务和宏任务？...注意：这两个任务分别维护一个队列，均采用先进先出的策略进行执行！同步执行的任务都在宏任务上执行。....然后开始下一轮EventLoop，执行宏任务中的异步代码，也就是setTimeout中的回调函数 6、结语之前兜兜转转，总是忘记事件的执行顺序。

4951 0

重学前端（三）-聊聊我们的浏览器的那些事

1、为啥写代码的时候要给css放前面，js 放后面 2、浏览器到底是单线程还是多线程 3、为什么会有冒泡和捕获的过程 4、浏览器到底是怎么实现异步的 5、为什么会有微任务和宏任务...js 执行栈执行到这里我们就能清晰的知道浏览器到底是怎么实现异步的了，而且顺带的不只是异步可以用eventloop实现的，甚至连事件也能用它实现，接下来，我们要来解答为啥要有微任务和宏任务的区分要想知道为啥要有宏任务和微任务的区分...，开始下次任务，这时eventloop机制被触发，也就是eventloop的触发是在js同步代码执行之后也在dom渲染之后接下来eventloop 中任务被一个个执行，然后遇见微任务放进微任务队列，遇见宏任务放进宏任务队列...，再次开始下一次的eventloop，周而复始，循环往复，那么问题来了，为啥宏任务要在dom渲染之后，而微任务要在dom渲染之前呢？...遍寻资料，我的理解是，之所以有微任务和宏任务的区分，是由于像promise等微任务是es的规范，并不是浏览器的规范，而想settiemout是浏览器的api规范，此时，为什么就清晰明了了，由于微任务是es

1.2K1 1

多图详解不同环境下的EventLoop执行机制

当然，这里有一个小 tip ，我们可以看到在每次页面渲染之前是会清空所有的微任务（micro）。...按照我们之前分析的 EventLoop 执行结果是不存在任何问题的。 immediate 先执行之所以会造成这样的输出结果，本质上还是 setTimeout 在捣鬼。...在 EventLoop 中必不可少的两个概念：Macro（宏任务）、Micro（微任务）。...其实它的本质和浏览器中是类似的，虽然 NodeJs 下存在多个执行队列，但是每次执行逻辑是相同的：同样是执行完成一个宏任务后会立即清空当前队列中产生的所有微任务。...Node & 浏览器在分别了解了不同环境下的 EventLoop 执行机制后，我们会发现其实浏览器中和 Node 中的事件循环 EventLoop 本质上执行机制是完全相同的，都是执行完一个宏(macro

5942 0

美团前端面试题整理_2023-02-28

宏任务在微任务执行之后执行，因此在同一个事件循环周期内，如果既存在微任务队列又存在宏任务队列，那么优先将微任务队列清空，再执行宏任务队列我们可以看到有一个核心的主线程，它的执行阶段主要处理三个核心逻辑...，这两个函数在我们之前的内容中没有讲过，但是当你开始考虑它们在 Eventloop 的生命周期的哪一步触发，或者这两个方法的回调会在微任务队列还是宏任务队列执行的时候，才发现好像没有想象中那么简单。...所以浏览器就把这两个线程设计成互斥的，即同时只能有一个线程在执行渲染原本就不应该出现在 Eventloop 相关的知识体系里，但是因为 Eventloop 显然是在讨论 JS 如何运行的问题，而渲染则是浏览器另外一个线程的工作...Eventloop 的生命周期里，只是浏览器又开放的一个在渲染之前发生的新的 hook。...所以微任务并不是像之前说的那样在每一轮 Eventloop 后处理，而是在 JS 的函数调用栈清空后处理但是 requestIdlecallback 却是一个更好理解的概念。

1K1 0

面试官：什么是 EventLoop。你：一脸蒙蔽。看完这篇文章就懂了

面试官：什么是 EventLoop。你：一脸蒙蔽。...看完这篇文章就懂了文章翻译自： https://javascript.info/event-loop 在这片文章，我们要带着两个问题去学习 EventLoop 概念是什么为什么需要 EventLoop...值得注意的是，两种变体（无论是否分配工作）setTimeout在速度上都是可比的。总体计数时间没有太大差异。为了使它们更接近，让我们进行改进。...更丰富的事件循环图片如下所示（顺序是从上到下，即：首先是脚本，然后是微任务，渲染，等等）： ? 在执行任何其他事件处理或呈现或执行任何其他宏任务之前，所有微任务都已完成。...2执行所有微任务：- 当微任务队列不为空时：- 出队并运行最旧的微任务。 3渲染更改（如果有）。 4如果宏任务队列为空，请等待直到出现宏任务。 5转到步骤1。

1.1K3 0

了不起的回调函数

，直到问题解决掉代码才会接着执行，但是我们在写js的过程中，其实很少有这种情况，原因是js本身就是一个异步编程语言，所谓的异步就是你慢没事，我跳过你，你啥时候好了，你再执行，这句话反映到代码上就是延迟式编程也就是异步编程...这是个很棘手的问题，所以js将我们常见的一些代码写法归类，归类为两种任务列表，一种叫做宏任务，一种叫微任务，比如常见的setTimeout、setInterval、Ajax请求等就是宏任务，常见的Promise...，一种是全局执行上下文）找到了宏任务就执行，微任务是什么执行的呢？...你可以理解为随时执行，他可以在同步函数执行之后立即执行，也可以在上一个宏任务执行结束，下一个宏任务执行之前，中间有微任务就会执行，微任务不执行结束，下一个宏任务是不会执行的，所以你可以理解为只要执行下一个宏任务的时候...，已经没有微任务可以执行了，上面这段话提供的信息和今天要说的回调函数有很大的关系，但是因为不是讲事件循环和宏微任务的，所以不展开说，下面说为什么一定要有回调函数回调函数：正常的函数是由外往内传递参数进行使用参数

1.2K2 0

前端经典面试题合集

宏任务在微任务执行之后执行，因此在同一个事件循环周期内，如果既存在微任务队列又存在宏任务队列，那么优先将微任务队列清空，再执行宏任务队列我们可以看到有一个核心的主线程，它的执行阶段主要处理三个核心逻辑。...将异步任务插入到微任务队列或者宏任务队列中。执行微任务或者宏任务的回调函数。在主线程处理回调函数的同时，也需要判断是否插入微任务和宏任务。...，这两个函数在我们之前的内容中没有讲过，但是当你开始考虑它们在 Eventloop 的生命周期的哪一步触发，或者这两个方法的回调会在微任务队列还是宏任务队列执行的时候，才发现好像没有想象中那么简单。...所以浏览器就把这两个线程设计成互斥的，即同时只能有一个线程在执行渲染原本就不应该出现在 Eventloop 相关的知识体系里，但是因为 Eventloop 显然是在讨论 JS 如何运行的问题，而渲染则是浏览器另外一个线程的工作...所以微任务并不是像之前说的那样在每一轮 Eventloop 后处理，而是在 JS 的函数调用栈清空后处理但是 requestIdlecallback 却是一个更好理解的概念。

8582 0

eventLoop事件循环机制

打个比喻银行柜台就一个：普通客户 - 宏任务 vip客户 - 微任务普通客户(宏任务)依次排队，vip客户（微任务）到了之后直接插到当前正在办理的普通客户后面大白话 JavaScript...是单线程执行的，也就是无法同时执行多段代码，当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个队列，一旦当前任务执行完毕，再从队列中取出下一个任务。...所以setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。...理解eventloop 因为js是单线程，所以有一套固定的执行顺序，也就是eventloop。 eventloop分为同步任务和异步任务。同步任务执行完才会执行异步任务。...eventloop过程简述：js从第一个宏任务（script标签）开始执行，会先把同步代码都执行完，中途遇到微任务先加入微队列，宏任务加入宏队列。等同步代码清完，先清空微队列。

5052 0

asyncawait 和 promise

，所以答案是以浏览器的eventloop机制为准的，在node平台上运行会有差异。...2.await 在等什么？一句话概括： await等的是右侧「表达式」的结果。也就是说，右侧如果是函数，那么函数的return值就是「表达式的结果」。...，在我脑海中宏任务和为微任务如图所示： ?...如果执行中遇到 promise.then() 之类的微任务，就会推入到「当前宏任务的微任务队列」中，在本轮宏任务的同步代码执行都完成后，依次执行所有的微任务1、2、3。...图8 此时当前宏任务1都执行完了，要处理微任务队列里的代码。微任务队列，先进选出的原则：执行微任务1，打印promise2 执行微任务2，没什么内容..

6731 0

JavaScript同步、异步及事件循环

虽然JS是单线程，但是浏览器是多线程的，在遇到像setTimeout、DOM事件、ajax等这种任务时，会转交给浏览器的其他工作线程(上面提到的几个线程)执行，执行完之后将回调函数放入到任务队列。...// eventLoop是一个用作队列的数组 // （先进，先出） var eventLoop = [ ]; var event; // “永远”执行 while (true) { // 一次tick...，会开始执行宏任务队列在执行完一个宏任务之后，跳出来，重新开始下一个循环(从1开始执行) 也就是说执行微任务队列会将队列中的所有微任务执行完而执行宏任务队列每次只执行一个宏任务然后重新开始下一个循环...2 3 5 6 4 我们来分析一下代码的执行过程前面的两个setTimeout都是宏任务，所以现在宏任务队列有2个任务 Promise里面的代码是同步任务，所以现在会马上执行输出1 Promise...的then是微任务，所以现在微任务队列有1个任务在执行完同步任务之后，开始执行微任务，也就是console.log(2), 输出2 在执行完微任务之后，会执行宏任务，第一个宏任务也就是第一个setTimeout

1.1K3 0

有哪些前端面试题是必须要掌握的_2023-02-27

宏任务在微任务执行之后执行，因此在同一个事件循环周期内，如果既存在微任务队列又存在宏任务队列，那么优先将微任务队列清空，再执行宏任务队列我们可以看到有一个核心的主线程，它的执行阶段主要处理三个核心逻辑...将异步任务插入到微任务队列或者宏任务队列中。执行微任务或者宏任务的回调函数。在主线程处理回调函数的同时，也需要判断是否插入微任务和宏任务。...，这两个函数在我们之前的内容中没有讲过，但是当你开始考虑它们在 Eventloop 的生命周期的哪一步触发，或者这两个方法的回调会在微任务队列还是宏任务队列执行的时候，才发现好像没有想象中那么简单。...所以浏览器就把这两个线程设计成互斥的，即同时只能有一个线程在执行渲染原本就不应该出现在 Eventloop 相关的知识体系里，但是因为 Eventloop 显然是在讨论 JS 如何运行的问题，而渲染则是浏览器另外一个线程的工作...所以微任务并不是像之前说的那样在每一轮 Eventloop 后处理，而是在 JS 的函数调用栈清空后处理但是 requestIdlecallback 却是一个更好理解的概念。

5732 0

一张图带你搞懂Node事件循环

timers队列的工作原理 timers并非真正意义上的队列，他内部存放的是计时器。每次到达这个队列，会检查计时器线程内的所有计时器，计时器线程内部多个计时器按照时间顺序排序。...，又一个nextTick微任务，立即率先执行 promise 1：执行异步宏任务之前，清空异步微任务，Promise的优先级低，所以在nextTick完了以后立即执行 nextTick in promise...可见，执行一个宏队列之前，就先按顺序检查并执行了nextTick和promise微队列。等微队列全部执行完毕，setTimeout(0)的时机也成熟了，就被执行。...nextTick in setTimeout：执行完上边这句代码，又一个nextTick微任务，立即率先执行【这种回调函数里的微任务，我不能确定是紧随同步任务执行的；还是放到微任务队列，等下一个宏任务执行前再清空的他们...nextTick in setTimeout100：宏任务向下前，率先执行定时器回调内新增的微任务-nextTick 【这里就能确定了，是下一个宏任务前清空微任务的流程】 promise in setTimeout100

1.1K2 1

关于EventLoop的简单理解

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com EventLoop出现的目的 js单线程众所周知js是单线程的，那为什么是单线程嘞，作为浏览器脚本语言，JavaScript...的主要用途是与用户互动，以及操作DOM。...这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？...于是就有了EventLoop的出现。宏任务与微任务从哪里来微任务 Promise ，当调用 Promise.resolve() 或者 Promise.reject() 的时候，会产生微任务。...主线程代码执行完成后就会从微任务队列中去取微任务执行直到微任务队列清空，微任务队列完成后就会从宏任务队列中取出宏任务执行，（个人理解：主线程代码就是第一个宏任务）如主线程任务一般，遇到微任务放入微任务队列

771 0

Eventloop不可怕，可怕的是遇上Promise

笔者答案：这个是属于Eventloop的问题。main script运行结束后，会有微任务队列和宏任务队列。微任务先执行，之后是宏任务。...），然后根据main script中产生的微任务队列和宏任务队列，分别清空，这个时候是先清空微任务的队列，再去清空宏任务的队列。...Promise的then是微任务大家都懂，但是这个then的执行方式是如何的呢，以及Promise的executor是异步的还是同步的？...最终的最终，是使用setTimeout，不过这个就和微任务无关了，promise变成了宏任务的一员。拓展思考：为什么有时候，then中的函数是一个数组？有时候就是一个函数？...笔者干货总结在处理一段evenloop执行顺序的时候：第一步确认宏任务，微任务宏任务：script，setTimeout，setImmediate，promise中的executor 微任务

6832 0

浏览器为契机贯穿前端知识点-大纲参考

浏览器工作原理分为以下几部分：分析浏览器份额，种类，理解浏览器是多进程还是多线程的，有哪些常驻进程和常驻线程，如何相互配合浏览器内核的工作原理，渲染线程和事件队列以及JS单线程的工作原理。...异步机制与事件队列，宏任务与微任务，worker，setTimeout不准的原因 https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules.../ ps：click会导致微任务立马执行?...js与gui渲染的互斥，此时如果有用户点击上下拉等操作，页面的效果是如何，比如下拉时js在执行大量计算，视图是先更新还是先执行大量计算 css和js资源加载的互阻塞浏览器的渲染机制，代码变成页面上的视图经历了哪些...深入理解nodejs Event loop 简单总结下JS中EventLoop事件循环机制这一次，彻底弄懂 JavaScript 执行机制浏览器的工作原理：新式网络浏览器幕后揭秘浏览器是如何工作的

5781 0

原生JS灵魂之问(下), 冲刺进阶最后一公里(附个人成长经验分享)

第28篇：如何理解EventLoop——宏任务和微任务篇宏任务(MacroTask)引入在 JS 中，大部分的任务都是在主线程上执行，常见的任务有: 渲染事件用户交互事件 js脚本执行网络请求、...上述提到的，普通任务队列和延迟队列中的任务，都属于宏任务。微任务(MicroTask)引入对于每个宏任务而言，其内部都有一个微任务队列。那为什么要引入微任务？微任务在什么时候执行呢？...在每一个宏任务中定义一个微任务队列，当该宏任务执行完成，会检查其中的微任务队列，如果为空则直接执行下一个宏任务，如果不为空，则依次执行微任务，执行完成才去执行下一个宏任务。...因此会打印出这样的结果: timer1 timer2 promise1 promise2 4.nodejs 和浏览器关于eventLoop的主要区别两者最主要的区别在于浏览器中的微任务是在每个相应的宏任务中执行的...根据EventLoop机制，当前主线程的宏任务完成，现在检查微任务队列, 发现还有一个Promise的 resolve，执行，现在父协程在then中传入的回调执行。我们来看看这个回调具体做的是什么。

1.9K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云