【JavaScript】线程和进程，JavaScript线程，事件队列，事件循环 ，微任务、宏任务

最新推荐文章于 2024-10-31 15:56:11 发布
最新推荐文章于 2024-10-31 15:56:11 发布
阅读量671 收藏 2
点赞数 2
分类专栏： # Javascript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/partworld/article/details/130837359
版权

❤️ Author： 老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事 乐观面对
😍 系列专栏：

文章目录

进程和线程

  • 进程：计算机已经运行的程序，使操作系统管理程序的一种方式
  • 线程：操作系统能够运行运算调度的最小单位，通常情况下被包含在进程中
  • 那么操作系统使如何做到同时让多个进程同时工作的？
    这是因为CPU的运算速度非常快，它可以快速的在多个进程之间迅速的切换；当我们进程中的线程获取到时间片时，就可以快速执行我们编写的代码，对于用于来说是感觉不到的

JavaScript线程

  • JavaScript是单线程的(但是可以开启Workers)，但是JavaScript的线程有自己的容器进程：浏览器或者Node
  • 目前多数的浏览器都是多线程的，当我们打开一个tab页面时就会开启一个新的进程，这是为了防止一个页面卡死而造成所有页面无法相应，整个浏览器需要强制退出；
  • 每个进程中又有很多的线程，其中包括执行JavaScript代码的线程，JavaScript代码执行是在一个单独的线程中执行的，这就意味着JavaScript代码在同一时刻只能做一件事，如果这件事是非常耗时的，当前的线程就会被阻塞
  • 所以真正的耗时的操作，实际上并不是由JS线程在执行的，浏览器的每个进程是多线程的，在其他线程可以完成这个耗时的操作，比如网络请求，定时器

事件队列、事件循环

  • 如果我们在执行JS代码中，有异步操作，比如中间插入了一个setTimeout函数时候，这个函数会被放入调用栈中，执行会立即结束，并不会阻塞后续代码的执行，而当所有的代码都执行完毕之后（全局执行上下文调用栈为空时），setTimeout中的回调函数会被浏览器依次放在事件队列中，然后出队列在调用栈中执行
    在这里插入图片描述

微任务、宏任务

  • setTimeout，setInterval，ajax，DOM监听等这种任务是宏任务，浏览器将他们加入到宏任务队列，Promise中then后面的函数是微任务，浏览器将他们加入到微任务队列
  • 这里我们需要保证在执行任何一个宏任务之前，我们必须保证微任务队列是清空的

面试题1

在这里插入图片描述

面试题2

  • 注意，如果有await的话，await后面的函数会立即调用，但是当遇到resolve或者reject的时候，就会调用.then或者.catch，这时候就要先加入到微任务里，等待全局执行上下文都完成后再执行微任务
    在这里插入图片描述

————————————————————————
♥♥♥码字不易，大家的支持就是我坚持下去的动力♥♥♥
版权声明：本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

李小浦
关注
专栏目录
深入理解JavaScript事件循环Event Loop：宏任务与微任务
Allen-
05-11 816
事件循环是JavaScript运行时环境（如浏览器或Node.js）中用于协调执行代码的一种机制。「宏任务」（Macrotasks）和「微任务」（Microtasks），以确保异步操作能够有序且高效地完成，同时保证了代码的非阻塞执行特性。
JavaScript异步、事件循环和消息队列、宏任务和微任务
cjx1259972299的博客
11-25 672
“JavaScript定位：单线程、异步、非阻塞、解释型脚本语言。” 曾经被问过一个问题：js 是单线程，为什么会有异步代码执行？ 为什么是单线程？JavaScript的设计就是为了处理浏览器网页间的交互（DOM操作的处理、UI动画等），如果有多个线程同时操作DOM，那么网页会是一团糟。 ...
【前端八股】JavaScript宏任务、微任务、事件循环
weixin_52624209的博客
03-08 353
本文介绍了JavaScript宏任务、微任务和事件循环的概念、区别和意义，并通过一个示例展示了事件循环的工作流程。文章首先解释了JavaScript是一门单线程语言，需要通过事件队列来协调同步任务和异步任务的执行。然后介绍了宏任务和微任务的定义和分类，并说明了它们在事件循环中的执行顺序。最后，通过一个简单的代码片段，演示了JavaScript代码的执行机制，以及宏任务和微任务对于异步编程的影响。
[javascript核心-07] 带你彻底弄懂事件循环机制、宏任务、微任务
技术无止境，人生仍探索。
06-06 670
带你彻底弄懂事件循环机制、宏任务、微任务，大前端知识体系与面试宝典，从前端到后端，全栈工程师，成为六边形战士
javascript 同步任务、异步任务，单线程、多线程，执行栈、任务队列、任务队列的维护，宏任务、微任务，事件循环。
Absurd_people的博客
08-30 991
原文连接：https://blog.csdn.net/weixin_39788986/article/details/110130711 原文连接：https://blog.csdn.net/terrychinaz/article/details/112425039
JavaScript 中线程、事件循环、消息队列、宏任务、微任务
m0_66333906的博客
06-21 943
JavaScript 中线程、事件循环、消息队列、宏任务、微任务
【JavaScript】究竟什么是事件循环 任务队列的分类（ 宏任务和微任务）
这道题我不会做...不会做啊..太难了！！
03-18 538
事件循环解析、宏任务和微任务概念线程 与 进程浏览器内核事件循环 Event LoopEvent Loop 过程解析总结例子参考 线程 与 进程 JS 是单线程执行的，指的是一个进程里只有一个主线程 进程是 CPU 资源分配的最小单位； 线程是 CPU 调度的最小单位 多进程： 在同一个时间里，同一个计算机系统中如果允许两个或两个以上的进程处于运行状态。 多进程带来的好处是明显的，比如你可以听歌的同时，打开编辑器敲代码，编辑器和听歌软件的进程之间丝毫不会相互干扰。 多线程： 程序中包含多个执行流，即在一个
JavaScript关于宏任务与微任务
YanHSama的博客
08-13 1282
js事件循环、宏任务和微任务理解
浏览器的消息队列和事件循环机制（宏任务和微任务）
jieyucx的博客
09-01 813
浏览器中的消息队列和事件循环机制是一种用于处理异步任务的方式。浏览器需要能够同时处理多个任务，如网络请求、用户交互等。为了避免任务的阻塞，浏览器使用消息队列来管理任务的执行顺序，并通过事件循环机制来处理任务的执行。fill:#333;color:#333;color:#333;fill:none;浏览器渲染引擎JS引擎消息队列事件循环执行上下文工作原理如下图所示：fill:#333;color:#333;color:#333;fill:none;
JavaScript事件循环及宏任务微任务原理解析
10-14
在JavaScript中，任务分为两类：同步任务和异步任务。同步任务是按顺序执行的，而异步任务分为宏任务（MacroTask）和微任务（MicroTask）。 宏任务主要包括：整个脚本、setTimeout、setInterval等。这些任务会在...
JavaScript单线程和任务队列原理解析
10-15
当主线程的执行栈为空时，JavaScript引擎会检查任务队列，将其中的异步任务取出，按照一定的规则（宏任务和微任务的区别）放入执行栈进行执行。 任务队列分为多个类型，包括宏任务（macrotask）和微任务（microtask...
浅谈javascript事件环微任务和宏任务队列原理
11-19
宏任务队列则包括 `setTimeout`、`setInterval`、`requestAnimationFrame` 等，它们会在当前宏任务执行完毕后，下一次事件循环开始时执行。 以一个经典例子来说明，假设我们有HTML元素和对应的JavaScript事件监听器...
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1110
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1294
项目功能：商品分类,商品信息,用户。
基于Mysql、JavaScript、PHP、ajax开发的MBTI性格测试网站（前端+后端）
2302_79553009的博客
10-29 1393
本项目旨在构建一个基于MBTI（迈尔斯-布里格斯性格分类指标）理论的在线平台——“16Personalities”。该平台利用PHP、MySQL、JavaScript等技术栈开发，旨在帮助用户更好地理解和运用MBTI理论来评估个人性格类型，并应用于职业规划、团队建设和人际交往等多个方面。用户端功能 包括账号注册与登录、在线性格测试、性格类型浏览、团队评估及在线交友等模块。用户可以通过完成性格测试来获得详细的MBTI性格分析，并通过平台提供的功能与其他具有不同性格类型的用户互动。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 643
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
ssm智慧社区电子商务系统+vue
weixin_44832324的博客
10-28 1249
系统能否进行正常工作，功能模块能否实现，程序代码是否有错误，这些都需要通过系统测试来进行判断，测试是程序开发中必不可少的步骤，就算系统一步不差的被开发出来了，但进行测试时总能发现一个之前从没遇到过的问题[26]。在系统开发的整个过程当中都需要不断进行系统测试，根据经验发现，前期的一个小问题，将会酿成后期的一个大问题，所以越早发现，越早解决，才能保证后续的编码、测试和设计能够顺利进行。目前，系统测试所使用的方法主要是黑盒测试，系统测试的目的包括：根据客户的需求来设计用户界面；
JavaScript的第十一天
最新发布
全栈学习ing
10-31 618
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
腾旭地图显示多个位置，点击弹出位置信息
m0_58047199的博客
10-31 193
center: new window.TMap.LatLng(longitude.value, latitude.value), //设置地图中心点坐标。rotation: 0 //设置地图旋转角度。zoom: 11, //设置地图缩放级别。pitch: 43.5, //设置俯仰角。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

李小浦

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值