JavaScript事件循环学习笔记（宏队列、微队列）

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

1、JS用来存储待执行的回调函数的队列包含2个不同特定的队列

  • 宏队列
    用来保存待执行的宏任务，例如：dom事件回调、ajax回调、定时器回调
  • 微队列
    用来保存待执行的微任务，例如：promis回调、mutation回调（改变观察者）

2、JS执行时会区别这两个队列

  • JS引擎首先必须执行所有的初始化同步代码
  • 每次准备取出第一个宏任务执行前，都要将所有的微任务一个一个取出来执行（包含在宏任务中的微任务：在执行到宏任务时先将其中的微任务添加到微任务队列，在执行下一个宏任务时先将这个添加的微任务执行完成，再执行宏任务）

总结：js代码执行顺序，先将所有的同步任务完成，完成后执行添加到异步队列中的异步任务。如果存在微任务的话执行所有的微任务，等待所有的微任务执行完成，再去执行异步队列中的宏任务在这里插入图片描述

YangZD1
关注
「高频面试题」消息队列 和 事件循环系统（内附思维导图）
超逸の学习技术博客
12-06 1388
前言 最近又和女友，咳咳…（说出来可能又会被打s）学习事件循环，这不，学会（废）了之后，赶紧写一篇博客复盘总结一下~ 接上一期「数组方法」写给女友的一系列 JS 数组操作（建议收藏 | 内附思维导图） 文章发出去之后，有些小伙伴还真发给自己女友了，不知道“感动”了没有哈（手动滑稽）。 那么，这次女友直接说明白了，那么我就从“头”开始讲讲事件循环系统，通过一篇文章搞定这一块知识点。 事件循环非常底层且非常重要，学会它能让你理解页面到底是如何运行的。 话说女友会点开这篇文章么？ 我“啪”地一下就醒过来了.
【JavaScript】宏队列与微队列 - 执行顺序 -事件循环
YK菌的博客
03-01 732
文章目录JS执行过程图原理图说明例子参考 JS执行过程图原理图 说明 JS是单线程的 JS 中用来存储待执行回调函数的队列包含2个不同特定的队列 宏队列：用来保存待执行的宏任务（回调），比如：定时器回调/DOM 事件回调/ajax 回调 微队列：用来保存待执行的微任务（回调），比如：promise 的回调/MutationObserver 的回调 JS 执行时会区别这2个队列 JS 引擎首先必须执行所有的初始化同步任务代码 每次准备取出第一个宏任务前，都要将所有的微任务一个一个
前端面试必考题：JavaScript事件循环(Event loop)、宏任务微任务
2401_84446825的博客
05-02 283
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
浏览器原理 14 # 消息队列和事件循环
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
04-12 479
说明 【浏览器工作原理与实践】专栏学习笔记
事件循环(eventloop)
陈小陈的博客
05-23 854
正在执⾏⼀个 JS 函数，执⾏到⼀半的时候⽤户点击了按钮，该⽴即去执⾏点击事件的处理函数吗？正在执⾏⼀个 JS 函数，执⾏到⼀半的时候某个计时器到达了时间，该⽴即去执⾏它的回调吗？浏览器进程通知“⽤户点击了按钮”，与此同时，某个计时器也到达了时间，应该处理哪⼀个呢？随着浏览器的复杂度急剧提升，W3C 不再使⽤宏队列的说法。- 1. 在最开始的时候，渲染主线程会进⼊⼀个⽆限循环。为什么渲染进程不适⽤多个线程来处理这些事情？要处理这么多的任务，主线程如何调度任务？
JavaScript-note:JavaScript - 学习笔记
05-05
javascript 学习笔记 目录 01-javascript高级程序设计 02-JavaScript数据与结构 01数组 02栈 03队列 04链表 05字典 ...... 03-javaScript设计模式 04-es6语法 05-js数据类型 05-js数据类型 07-javaScript常用工具...
JavaScript学习笔记整理_setTimeout的应用
11-24
`setTimeout`的一个重要特点是，它不是立即执行函数，而是将其添加到事件队列中，待当前执行上下文完成后再进行。因此，JavaScript的单线程性质意味着，即使设置了1毫秒的延迟，也不能保证函数会在精确的时间点执行...
JavaScript宏队列微队列以及事件轮回
LV0720的博客
06-09 367
javascript在执行时，遇到异步执行的方法，不会等异步方法返回结果再继续向下执行，而是先将异步方法放到一个队列中，然后继续执行，最后主线程空闲时，再按照顺序执行队列里的异步方法，叫做事件轮回。队列又分为宏队列和微队列，将宏任务放在宏队列，微任务放在微队列，在执行时遵循先全局方法，后微任务，最后宏任务的顺序。 宏任务：setTimeout, setInterval, setImmediate, I/O, UI rendering. 微任务：process.nextTick, Promise.then,
JavaScript学习笔记之定时器
10-24
1. **异步执行**：定时器函数不会立即执行，而是被添加到事件队列中，等到当前脚本执行完毕，浏览器空闲时才会执行。 2. **清除定时器**：使用`clearTimeout`或`clearInterval`来取消已设置的定时器，防止不必要的...
js 队列和事件循环
whiteGay的博客
10-19 64
1.示例代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" conten...
阶乘递归javascript
2401_83905000的博客
11-18 92
【代码】阶乘递归javascript。
【Node.js】Node.js 和浏览器之间的差异
佚名程序员
11-16 1132
Node.js 是一个基于 Chrome V8 引擎构建的开源 JavaScript 运行时，它使开发者能够在服务端运行 JavaScript 代码。Node.js 提供了高效的事件驱动和非阻塞 I/O 模型，广泛应用于构建快速、可扩展的网络应用。核心特性单线程：使用事件循环机制实现并发。非阻塞 I/O：适合高并发应用。模块化：采用 CommonJS 模块系统。浏览器是前端开发的主要运行环境。其核心任务是解析 HTML、CSS 和 JavaScript，并呈现网页内容。
Nuxt2和Nuxt3 对于SEO优化的区别
书山有路_邓
11-14 576
nuxt
vue2 - 17.路由进阶
2301_81051419的博客
11-18 875
linkActiveClass 模糊匹配 类名自定义linkExactActiveClass 精确匹配 类名自定义。
打造技术文档指南
欢迎来到我的博客，希望你能有所收获！
11-18 772
文档驱动开发
Node.js 23 发布了！
最新发布
2301_78659329的博客
11-18 217
Node.js 23 现已推出，带来了新功能、性能改进和更好的开发者体验。此次版本提升了兼容性和稳定性，提供了更多工具来构建高效的应用程序。此外，Node.js 22 将在 10 月 29 日当周被提升为长期支持 (LTS) 版本，进入长期维护阶段，以确保稳定和安全的更新。支持使用 require() 加载原生 ES 模块——在 v23.0.0 之前，该功能是通过 --experimental-require-module 启用的。
vite + vue3 + ts解决别名引用@/api/user报错找不到相应的模块
qq_43206280的博客
11-14 332
这里的前提是，文件路径以及文件已存在的情况下还是报错。
vue3 中,字段必须在 onShow 前定义?
一直在路上
11-14 221
在Vue 3中，如果你在组件的 setup() 函数中使用了生命周期钩子，比如 onShow，你可能遇到了一个错误，提示你在 onShow 前定义了某个字段。这通常意味着你应该在 setup() 函数的顶部定义这些字段，并确保它们是响应式的，这样它们就可以在组件的任何生命周期钩子中被访问和更新。在这个例子中，myField 是在 setup() 函数的顶部定义的，这保证了它在 onShow 被调用前已经定义。这样，myField 就可以在 onShow 钩子中被访问了。
深入解析 Vue 3 中的 `computed` 以及相关知识点
2301_79858914的博客
11-17 659
在 Vue.js 中，computed 属性用于定义计算属性，是一个基于响应式依赖的缓存值，只有当依赖的数据变化时才会重新计算。它是构建高效、性能优异的 Vue 应用的重要工具。
1. langgraph中的react agent使用 (创建react agent)
No trade is free, but my tutorials are.
11-16 254
首先，确保你已经安装了以下库：你可以使用以下命令进行安装： 代码实现 1. 导入必要的库 2. 初始化 OpenAI 模型 3. 定义工具函数 4. 创建工具列表 5. 创建反应式代理 6. 显示代理图 8. 测试获取天气信息 输出： 9. 测试其他问题 输出： 参考链接：https://langchain-ai.github.io/langgraph/how-tos/create-react-agent/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值