EventLoop事件循环 、微任务队列和宏任务队列

最新推荐文章于 2025-02-17 16:30:06 发布
最新推荐文章于 2025-02-17 16:30:06 发布
阅读量215 收藏
点赞数 2
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wangshuaibinggg/article/details/127912252
版权

javaScript 是一门单线程执行的脚本语言。也就是说，同一时间只能做一件事情。

javaScript要运行在宿主环境中（浏览器，nodejs）下。浏览器内部有执行js代码的引擎(V8引擎)

浏览器的事件循环

排队是任务是以事件及其回调的方式存在的。

当事件（用户的点击，图片的成功加载）发生时，将其回调添加到任务队列；主线程上的任务完成之后，就会从任务队列中取出任务来执行。

js是单线程的，一次只能做一件事。js在浏览器这个宿主环境中运行。浏览器是多线程的，用户交互，定时器，网络请求等等浏览器中的事件会产生对应的任务，任务多了要在任务队列中排队，浏览器的主线程依次取出任务来执行，此过程不断重复从而形成一个循环，称为eventLoop。

微任务队列和宏任务队列

微任务代码（js语法）

  • Promise对象.then()

宏任务代码（宿主环境）

  • script
  • dom事件
  • ajax
  • setTimout

  • 画图

微任务在进程的执行过程中相对于同级别的宏任务可以优先执行

 

【前端面试】全网最全javascript Event Loop、任务队列解释
hhhh
08-15 1057
Axios 是一个基于 Promise 的 HTTP 客户端，用于执行异步的 HTTP 请求。它利用了 JavaScript 的异步编程特性，特别是 Promise，来处理请求和响应。Axios 的请求和响应处理遵循 JavaScript 的事件循环和宏任务/微任务队列，但它本身并不定义为宏任务。宏任务通常指的是浏览器或 Node.js 环境中的高级别异步操作，如定时器、网络请求等，而 Axios 作为这些操作的封装，其内部实现细节对用户来说是透明的。性能影响过度使用微任务（如大量Promise。
Vue学习记录之十九 Event Loop,宏任务和微任务
LvManBa的博客
10-22 969
当一个宏任务执行完毕后，会检查是否有微任务队列，如果有，则将微任务队列中的所有任务依次执行完毕，然后再继续选择下一个宏任务执行。这样的过程循环进行，形成了事件循环。微任务通常在宏任务执行完毕后立即执行，因此微任务具有更高的优先级，可以在页面渲染前执行，从而提供更好的用户体验。微任务的优先级高于宏任务，因此微任务会在本轮宏任务执行结束后立即执行，而不是等到下一个事件循环。按顺序执行， 同步任务直接执行，异步任务进入异步队列，执行完以后，在进行入异步列队，然后在看是同步还是异步任务，如此循环执行。
事件队列、微任务与宏任务的理解和面试题
m0_51636525的博客
06-30 729
事件队列是一种数据结构，可以存放要执行的任务。它符合队列"先进先出"的特点。事件循环中并非只维护着一个队列，事实上是有两个队列：事件循环对于两个队列的优先级是怎么样的？1.main script中的代码优先执行；2.在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行 也就是宏任务执行之前，必须保证宏任务队列是空的； 如果不为空，那么就优先执行微任务队列中的任务（回调）；Promise面试题一 promise async await面试
async和await概念 浏览器EventLoop事件循环 以及一些遇到的相关面试题
m0_74076766的博客
11-17 349
async和await概念 浏览器EventLoop事件循环 以及一些遇到的相关面试题
事件循环队列中的宏任务与微任务
vanora1111的博客
09-04 440
栈结构：先进后出 队列：先进先出
面试题之事件循环
前端-黎姿
04-09 356
以前一看到这些js深层原理的文章觉得很难理解，现在看的文章多了，慢慢发现也没有很难。所以遇到困难不要怕，迎难而上，有些文章会讲解的比较通俗易懂，慢慢就懂了~~~加油！！ JavaScript 是单线程的,，可是浏览器又能很好的处理异步请求，那么到底是为什么呢？ 浏览器执行线程 在解释事件循环之前首先先解释一下浏览器的执行线程： 浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程，其中浏览器渲染进程（浏览器内核）属于浏览器多进程中的一种，主要负责页面渲染，脚本执行，事件处理等 其包含的线程有：G
深入理解 事件循环event loop 这一篇就够了
一枚不断学习的小码农一枚~
03-26 2215
首先来了解一下浏览器执行中的线程 主线程： js引擎执行的线程，这个线程只有一个，页面渲染、函数处理都在这个线程上。 工作线程：也称幕后线程，这个线程可能存在于浏览器和js引擎内，与主线程是分开的，处理文件读取、网络请求等异步事件 任务队列（Event Queue）： 所有的任务都可以分为同步任务和异步任务 同步任务即为立即执行的任务，一般直接进入主线程中执行 异步任务不进入主线程，先放到辅助线程中处理，一般分为"发起函数"和"回调函数"(如setTimeout(fn(), 100)中setTimeout
JavaScript 任务队列详解：Event Loop、宏任务与微任务
最新发布
一萧烟雨任平生
02-17 1460
Event Loop 执行顺序执行同步代码（主线程上的任务）。执行所有微任务（Microtask Queue）。执行一个宏任务（Macrotask Queue）。回到步骤 2，执行所有新的微任务。继续执行宏任务队列中的下一个任务。优先级对比微任务 > 宏任务（微任务会在每个宏任务前全部执行完）。多个微任务会按照添加顺序执行。多个宏任务也是按照添加顺序执行。掌握事件循环（Event Loop）
JavaScript事件循环机制（event loop）、宏任务、微任务总结
工作的日常记录和平凡的生活分享
05-30 2081
多线程 vs 单线程：浏览器通过多线程模型处理异步任务，而Node.js使用单线程事件循环。宏任务与微任务的执行：浏览器在每个事件循环迭代中先执行宏任务，然后清空微任务队列；Node.js在每个阶段结束后检查微任务队列，并在适当时机执行微任务。：Node.js特有的允许回调在当前事件循环迭代的末尾执行，提供了更高的执行优先级。理解这些差异对于在不同环境中编写高效且可靠的JavaScript代码至关重要。
JavaScript事件循环及宏任务微任务原理解析
10-14
理解JavaScript的事件循环和宏任务、微任务的概念对于编写高性能、响应式的前端应用至关重要。通过合理安排任务类型和执行顺序，开发者可以优化代码执行效率，避免阻塞主线程，提升用户体验。在开发过程中，应尽量...
js——事件队列的宏任务和微任务
一个昵称叫铃风的小前端
03-18 281
先放个不错的别人的，有空再自己整理：https://www.cnblogs.com/yinzhida/p/12009738.html
深入理解事件循环
weixin_49295874的博客
03-24 304
众所周知，JavaScript 是一门单线程语言，虽然在 html5 中提出了 Web-Worker ，但这并未改变 JavaScript 是单线程这一核心,，可是浏览器又能很好的处理异步请求，那么到底是为什么呢？ 浏览器执行线程 在解释事件循环之前首先先解释一下浏览器的执行线程： 浏览器是多进程的，浏览器每一个 tab 标签都代表一个独立的进程，其中浏览器渲染进程（浏览器内核）属于浏览器多进程中的一种，主要负责页面渲染，脚本执行，事件处理等 其包含的线程有：GUI 渲染线程（负责渲染页面，解析 HT.
深入理解JavaScript的事件循环（Event Loop）
你若盛开，清风自来
03-09 814
本文将为你详细解释JavaScript的事件循环机制，探讨其工作原理以及如何影响JavaScript的执行。通过深入理解事件循环，你将能更好地掌握JavaScript的异步编程。📚事件循环是JavaScript异步编程的核心概念。通过理解事件循环的工作原理和任务队列的管理，你将能更好地掌握JavaScript的异步编程模式。这将使你能够编写更高效、更可靠的代码。
深入理解事件循环机制
桃花扇的博客
04-20 290
浏览器常驻的线程 js引擎线程（解释执行js代码、用户输入、网络请求） GUI线程（绘制用户界面、与js主线程是互斥的） http网络请求线程（处理用户的get，post等请求，等返回结果后将回调函数推入任务队列） 定时器触发线程（setTimeout，setIntervat等待事件结束后把执行函数推入任务队列中） 浏览器事件处理线程（将click，mouse等交互事件发生后将这些事...
【JavaScript】究竟什么是事件循环 任务队列的分类（ 宏任务和微任务）
这道题我不会做...不会做啊..太难了！！
03-18 583
事件循环解析、宏任务和微任务概念线程 与 进程浏览器内核事件循环 Event LoopEvent Loop 过程解析总结例子参考 线程 与 进程 JS 是单线程执行的，指的是一个进程里只有一个主线程 进程是 CPU 资源分配的最小单位； 线程是 CPU 调度的最小单位 多进程： 在同一个时间里，同一个计算机系统中如果允许两个或两个以上的进程处于运行状态。 多进程带来的好处是明显的，比如你可以听歌的同时，打开编辑器敲代码，编辑器和听歌软件的进程之间丝毫不会相互干扰。 多线程： 程序中包含多个执行流，即在一个
JavaScript的事件队列(Event Queue)
weixin_34346099的博客
09-16 1294
前言 在写代码的时候经常思考一个问题,到底是那个函数先执行，本身JavaScript是一门单线程的语言，意思就是按照顺序执行。但是加入一些setTimeout和promise的函数来又实现了异步操作，常常我会写一个setTimeout(fn,0),他会立即执行吗？ 宏任务和微任务 首先我们先来看一段代码： <script> console.log("Start"); setTimeo...
面试题: 深入理解事件循环机制
全栈者 的博客
09-19 1504
面试题目(头条笔试)：直接上题，答对解释通算你赢，就不用看解析了。点击页面后，下面代码的输出结果是什么？document.addEventListener('click'...
一篇文章带你彻底搞懂事件循环
Ghmin的博客
04-03 861
事件循环可谓是考验前端基础功的必问题，在面试中也是频繁出现。不管是html，css还是js，其实都是在浏览器上运行，所以要说清楚事件循环，那浏览器是必不可少，接下来就从浏览器开始，一起谈谈事件循环吧。
事件循环队列与宏任务和微任务
QIU的博客
07-25 248
说到事件循环队列, 就要知道为什么会有事件循环队列这个概念 : 首先我们要知道, 我们的JavaScript是单线程的,( 所谓的单线程就是说, 事情要一件一件的做, 转换在代码上就是说代码是 一行一行的执行的 ),.大家都知道同步把,同步代码就是从上到下执行,前面的代码不执行完, 会阻塞后面代码的执行 . 但是说到同步就要说到异步 , 异步代码就不是一行一行从上到下依次执行的 , 它可以同时做几件事, 而且异步代码在同步代码后面输出结果 : console.log(1) setTimeout(()
js 事件循环 异步/同步和宏任务/微任务
07-03
JavaScript 的事件循环（Event Loop）是 JavaScript 运行机制中的核心部分，负责处理异步操作和线程调度。它是 JavaScript 中实现非阻塞I/O和响应用户交互的关键。 **异步/同步：** - **同步**（Synchronous）：代码按照顺序执行，每个任务完成后才会执行下一个任务。如果某个任务耗时较长，将导致整个程序暂停直到该任务完成。 - **异步**（Asynchronous）：代码执行不会被阻塞，当遇到异步任务（如定时器、网络请求或读取文件）时，JavaScript会继续执行后续的同步代码，而把异步任务放到后台等待处理，完成后通过回调、Promise 或 async/await 结合事件循环来通知主线程。 **宏任务/微任务：** - **宏任务（Macrotask）**：指的是那些浏览器可以感知到的任务，比如脚本执行、UI渲染、DOM操作、setTimeout 和 setInterval 回调等。每次事件循环开始，都会先执行所有已排队的宏任务。 - **微任务（Microtask）**：微任务比宏任务优先级高，它们通常是在某些特定情况下生成的，例如 Promise 的 resolve 或 reject 时、MutationObserver 观察到 DOM 变化时、process.nextTick() 执行的内容。每当宏任务执行完毕，立即执行所有的微任务。 简而言之，事件循环的工作流程大致如下： 1. 执行当前同步代码块。 2. 如果有微任务，立即执行微任务。 3. 宏任务队列中如果有任务，执行宏任务。 4. 完成当前宏任务后，再次检查是否有微任务并执行。 5. 重复步骤3和4，直到没有更多任务。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值