事件循环(EventLoop)、宏任务微任务

最新推荐文章于 2024-06-11 11:53:52 发布
最新推荐文章于 2024-06-11 11:53:52 发布
阅读量288 收藏 1
点赞数 1
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72953424/article/details/126090146
版权

前言

javascript是一门单线程脚本语言，在执行任务时需要一个一个去执行，一旦遇到非常耗时的任务时，就会导致阻塞，造成程序假死现象。针对这个问题，javascript便将执行的任务分为两类，即同步任务和异步任务。在主线程执行栈中执行程序时，若遇到异步任务，便将异步任务交给异步处理器进行处理，异步处理器将已完成的异步任务的回调函数放到异步队列中，等待执行，当主线程执行栈中的同步任务执行完毕后，会读取异步队列中的回调函数，按次序依次执行。知道了同步任务和异步任务的概念，下面我们来了解什么是事件循环(EventLoop)
在这里插入图片描述

宏任务和微任务

javascript将异步任务又进一步划分成了宏任务和微任务；
常见的宏任务有：Ajax请求、文件操作、setTimeout、setInterval
常见的微任务： Promise的then、catch、finally方法，Process.nextTick;
在这里插入图片描述
宏任务和微任务的执行顺序
在这里插入图片描述
便于理解的生活场景映射
①小云和小腾去银行办业务。首先，需要取号之后进行排队；
⚫宏任务队列
②假设当前银行网点只有一个柜员，小云在办理存款业务时，小腾只能等待
⚫单线程，宏任务按次序执行
③小云办完存款业务后，柜员询问他是否还想办理其它业务？
⚫当前宏任务执行完，检查是否有微任务
④小云告诉柜员：想要买理财产品、再办个信用卡、最后再兑换点马年纪念币？
⚫执行微任务，后续宏任务被推迟
⑤小云离开柜台后，柜员开始为小腾办理业务
⚫所有微任务执行完毕，开始执行下一个宏任务

前端二柱子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端面试题详解——JavaScript事件流模型=＞事件冒泡和事件捕获（个人学习）
weixin_47295135的博客
11-16 580
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、什么是事件？二、什么的是事件流1.事件流描述的是从页面中接受事件的顺序2.事件冒泡和事件捕获的概念：事件冒泡事件捕获 前言 事件冒泡，事件捕获 提示：以下是本篇文章正文内容，下面案例可供参考 一、什么是事件？ 事件是文档和浏览器窗口中发生的特定交互瞬间。 事件是javascript应用跳动的心脏，也是所有东西黏在一起的胶水，当我们与浏览器中web页面进行某些类型的交互时，事件就发生了。 事件可能是用户在某些内容上的点击
EventLoop执行顺序.zip
02-03
在JavaScript的世界里，EventLoop（事件循环）是一个至关重要的概念，它确保了代码的非阻塞执行和异步处理。本文将深入探讨EventLoop的工作原理、执行顺序以及相关的宏任务和微任务。 首先，理解EventLoop的核心是...
js 宏任务和微任务 promise
GJQI12的专栏
03-25 893
1.概念：宏任务（macrotask ）和微任务（microtask） 表示异步任务的两种分类。常见宏任务：I/O 、setTimeout、setInterval；微任务：Promise.then catch finally、process.nextTick 在挂起任务时，JS 引擎会将 所有任务 按照类别分到这两个队列中， 首先在 macrotask 的队列（这个队列也被叫做 task q...
这一次，彻底弄懂 JavaScript 执行机制（写的非常好）
qq_34117170的博客
02-09 883
本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。 不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论： *javascript是按照语句出现的顺序执行的* 看到这里读者要打人了：我难道不知...
JavaScript中的事件循环机制
最新发布
qq_38053677的博客
06-11 1886
如果有三个按钮，其回调函数里面处理的代码量用的时间各不相同，用户依次快速的点击三个按钮，此时用户希望的是，先点击的先执行，后点击的后执行，可是由于是Js多线程的，每一个回调函数都会被注册成一个线程，这时，肯定是用时少的先执行。这就造成了一个很大的问题，用户体验很不好可能有人会问，定时器里的代码为什没有按照顺序执行呢？答：JavaScript采用了一种排队机制，将异步代码放入了消息队列中，待同步代码执行完后，如果消息队列中存在异步代码需要执行，就会唤醒Js主线程去执行这些异步代码。
闭包 单线程： 同步任务： 宏任务 微任务
XCXLOVE_的博客
01-11 343
闭包 同步 异步 宏微任务
Event loop微任务宏任务
BUG_devil的博客
07-29 623
微任务、宏任务
JS事件循环机制event loop宏任务微任务原理解析
10-14
JavaScript事件循环机制（Event Loop）是JavaScript异步执行的核心，它确保了代码的有序执行，尤其是在处理复杂的异步操作时。JavaScript引擎遵循ECMAScript规范，设计为单线程执行，这意味着同一时间只能执行一条...
JavaScript事件循环及宏任务微任务原理解析
11-19
JavaScript的事件循环（Event Loop）机制是理解和...理解事件循环、宏任务和微任务的概念对于编写高性能的JavaScript代码至关重要，特别是处理异步操作时，合理安排任务可以帮助避免阻塞主线程，提高应用的响应速度。
一次搞懂-JS事件循环之宏任务和微任务
张宁乐的博客
04-03 997
众所周知，JS 是一门单线程语言，可是浏览器又能很好的处理异步请求，那么到底是为什么呢？
让你理解: 事件循环 eventloop
hmxs_hmbb的博客
05-23 535
面试官问起事件循环, 不会回答? 我来让你知道什么是事件循环
深层理解JavaScript事件循环/微任务宏任务
wangteng4154的博客
12-07 628
JavaScript 在单个线程上执行所有操作，但您是否觉得它通过使用一些复杂的数据结构给人一种多线程的错觉？
事件循环（消息机制）、宏任务、微任务
qq_34754747的博客
07-12 710
可以判定使用什么函数去处理代码：例如，你需要在dom渲染之前做好逻辑处理，等待dom渲染完毕后，展示于页面，此时必用微任务方式处理；反之需要获取dom的操作就需要采用宏任务的相关代码去包裹处理函数，才不至于获取不到元素而报错！！！宏任务：script (可以理解为外层同步代码)；setTimeout/setInterval3；UI rendering/UI事件；postMessage，MessageChannel5. setImmediate，I/O（Node.js）微任务：Promise、async/aw
事件循环-宏任务-微任务
WikY
06-25 721
事件循环，宏任务，微任务
简述事件循环(event loop)、微任务、宏任务
Waifang
09-05 2125
简述事件循环（event loop）、宏任务、微任务首先明白以下几点：JS为什么是单线程的?JS为什么需要异步?JS单线程又是如何实现异步的呢?浏览器的多线程javaScript 的事件循环（event loop）宏任务微任务事件循环流程事件循环图示示例参考文章 首先明白以下几点： JS为什么是单线程的? js作为主要运行在浏览器的脚本语言，js主要用途之一是操作DOM。假如有两个线程，多线程的...
JS事件循环机制（event loop）之宏任务/微任务
weixin_34391445的博客
07-14 768
标签： eventloop 事件机制 node 原文地址：Tasks, microtasks, queues and schedules 鉴于上篇文章有提到过 微任务与宏任务，所以，在此做个细致补充： 话不多说，直接进入正文： [1] 本文主要根据网上资源总结而来，如有不对，请斧正。 [2] 需要知道的专业名词术语：synchronous：同步任务、asynchronous：异步任务、task...
宏任务和微任务
qq_39224645的博客
02-22 1918
javascript的宏任务和微任务 宏任务有Event Table、Event Queue，微任务有Event Queue 1.宏任务：包括整体代码script，setTimeout，setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)； 2.微任务：Promise、MutaionObserver、process.nextTick(Node.js 环境) 注：new Promise中的代码会立即执行，then函数分发到微任务队列，process.nextTick
EventLoop、宏任务、微任务
aceyaya的博客
05-18 252
为什么要EventLoop？ 　　JS 作为浏览器脚本语言，为了避免复杂的同步问题（例如用户操作事件以及操作DOM），这就决定了被设计成单线程语言，而且也将会一直保持是单线程的。而在单线程中若是遇到了耗时的操作（IO，定时器，网络请求）将会一直等待，CPU利用率将会大打折扣，时间大量浪费。所以需要设计一种方案让一些耗时的操作放在一边等待，让后面的函数先执行，于是有了EventLoop的设计。 将任务分为两种： 同步任务 异步任务 定时器都是异步操作 事件绑定都是异步操作 AJAX中一般采取的异步操作（虽然也
event loop ，宏任务，微任务之详解
gisercug的博客
07-05 1234
众所周知，javaScript是单线程的语言，Event Loop是javascript的执行机制 同步，异步 对于以上我的理解是：JavaScript是单线程的语言，可是在当存在大型图片加载，文件请求，定时器操作等情况下，可能会堵塞代码的运行，于是出现同步，异步的情况出现，在代码中，代码运行过程中，同步代码会放在执行栈中，当遇到异步的代码时，会将任务保存在一个队列中，当执行栈中空了之后，队列弹出一个任务到执行栈中运行，直到所有任务运行完毕。而异步任务存在微任务和宏任务， 微宏任务有那些？ 宿主环境提供的方
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 ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值