事件循环机制:JavaScript被设计为单线程,那如何做到异步的呢?
myzbx 2025-01-10 15:41 39 浏览
js是单线程的语言,单线程是指所有的程序路径按照一定的顺序执行,只有前面的程序执行了,后面的程序才会执行。
也就是说在同一时间,js只能做一件事情,为了协调浏览器产生的各种事件、网络处理、前端渲染等行为,js的事件循环机制,即EventLoop应运而生。
JavaScript是单线程的原因
js的设计初衷是作为浏览器的脚本语言,浏览器中涉及到与用户互动、频繁操作DOM等动作,如果js设计为多线程,会有很复杂的线程同步问题,即使同步问题被解决,也会降低浏览器的响应效率,得不偿失,因此,JavaScript被设计为单线程保证浏览器动作的一致性。
事件循环(EventLoop)
JavaScript既然被设计为单线程,是如何做到异步的呢?这时就用到了JavaScript的事件循环机制。
如下图所示为JavaScript事件循环的原理图。
如图所示,事件循环是主线程循环读取任务队列中的任务,直到所有的任务都被执行。在事件循环中,JavaScript用到了栈、堆以及队列等数据结构。
栈中存放的是执行上下文,有函数被调用时,就会创建上下文存放在执行栈中。
堆中表示一个非结构化的内存区域,用来存放对象。队列是指任务队列,用于存放异步任务。
js引擎遇到一个异步事件之后不会一直等待事件的返回结果,而是将事件挂起,继续执行执行栈中的其他任务。
当异步事件返回结果时,js将异步事件callback函数放入队列中,被放入队列中的异步事件不会立即回调,等到当前执行栈中的任务都执行完成,处于闲置状态的主线程按照队列顺序将处于首位事件的callback函数放入执行栈中,执行该函数的同步代码,如果遇到了异步事件,同样也会将其回调函数放入事件队列中......
如此反复,就形成了一个无限循环,这也是被称为“事件循环(EventLoop)”的原因。
宏任务(Micro task)和微任务(Macro task)
js事件循环的基本原理已经描述清楚,但是异步任务之间也有所不同。
上面讲到,js在执行异步任务时,回调函数会被放在js的任务队列中,实际上,回调函数的类别不同,执行的优先级也不同。
不同的优先级被分为两类,一类是宏任务(Micro task),一类是微任务(Macro task)。
回调函数是微任务时,会被放在微任务队列,回调函数是宏任务时,会被放在宏任务队列。微任务的优先级高于宏任务,当主线程的任务执行完成时,会首先去执行微任务队列中首位的回调函数,当微任务队列中为空时,才回去执行宏任务队列中的回调函数。
常见的微任务有:promise,常见的宏任务有setInterval等。
因此,事件循环的执行流程图如下所示:
最后:
1)关注+私信回复:“测试”,可以免费领取一份10G软件测试工程师面试宝典文档资料。以及相对应的视频学习教程免费分享!,其中包括了有基础知识、Linux必备、Mysql数据库、抓包工具、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试高级持续集成、测试架构开发测试框架、性能测试等。
2)关注+私信回复:"入群" 就可以邀请你进入软件测试群学习交流~~
- 上一篇:Js基础2:基本概念之事件
- 下一篇:关于马金瑜网络舆情相关情况的调查通报
相关推荐
- 大白话讲nnvm(大白话讲解什么是卷积)
-
之前工作经验中,在某大厂,开发过机器学习框架,在和业务同学的合作下,取得还可以的成绩,但是一直觉得缺少了什么,最近在刷ai-system相关的公开课,才明白计算图的重要性,以往觉得不能理解的东西,现在...
- Python之Json模块详解(python.json()用法)
-
Step1:Json是什么JSON(JavaScriptObjectNotation,JS对象标记)是一种轻量级的数据交换格式。具有数据格式简单,读写方便易懂等很多优点。许多主流的编程语言都...
- 最新潮最流行的影音资源——MAU影视
-
MAO影视,一款完全免费的影视软件,为您带来最新潮最流行的影音资源,软件本身并不具备任何资源,只是作为一款播放器提供给大家。配合相关的接口链接,即可为您呈现丰富多彩的影音节目。软件版本支持:1.安卓2...
- Python版的迷你程序——json文件转换为csv
-
浅话C语言是过去几十年软件和硬件两个阵营之间,签署的最坚实的契约。硬件为C语言的语义提供了最能发挥其性能的基础构件,而软件虽然搞了很多的圆环套圆环般的层次,但最终都以C语言作为最后的沉淀收尾。----...
- 没硬盘、网盘也能看片自由!NAS一键部署MoonTV,随时随地爽看。
-
本内容来源于@什么值得买APP,观点仅代表作者本人|作者:羊刀仙有没有一个应用服务,能满足既没有足够预算购置硬盘,也不想依托网盘的朋友的家庭观影需求?之前我介绍过LibreTV,本篇再来看看另一个更...
- 用云存储30分钟快速搭建APP,你信吗?
-
背景不管你承认与否,移动互联的时代已经到来,这是一个移动互联的时代,手机已经是当今世界上引领潮流的趋势,大型的全球化企业和中小企业都把APP程序开发纳入到他们的企业发展策略当中。但随着手机APP上传的...
- Python的dict和json区别(python中dict的特点)
-
大家有没有发现,python中的字典类型的数据结构,和我们目前比较流行的web端的json格式,非常类似,几乎有点分不清了。那么这2者的区别是什么呢?首先,从概念上,我们要理解这2者是截然不同的。py...
- 越晚搞懂 MySQL JSON 数据类型,你就越吃亏
-
作者介绍陈臣,甲骨文MySQL首席解决方案工程师,公众号《MySQL实战》作者,有大规模的MySQL,Redis,MongoDB,ES的管理和维护经验,擅长MySQL数据库的性能优化及日常操作的原理剖...
- 揭秘你不会画“信息结构图”的本质
-
编辑导语:产品信息结构图有助于清晰地展示产品信息,一定程度上可以为后台上传数据提供依据,但不少人可能觉得产品信息结构图很难,这可能是对数据库表结构不理解等因素导致的。本篇文章里,作者就产品信息结构图的...
- python之json基本操作(.json python)
-
1.概述JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,它具有简洁、清晰的层次结构,易于阅读和编写,还可以有效的提升网络传输效率。Python标准库的...
- JWT 和 JJWT 还傻傻的分不清吗(jwt jti)
-
JWTs是JSON对象的编码表示。JSON对象由零或多个名称/值对组成,其中名称为字符串,值为任意JSON值。JWT有助于在clear(例如在URL中)发送这样的信息,可以被信任为不可读(即加密的)、...
- 比json快20-100倍!protobuf原理深入剖析
-
一、protobuf语法指南1.1定义一个消息类型先来看一个非常简单的例子。假设你想定义一个“搜索请求”的消息格式,每一个请求含有一个查询字符串、你感兴趣的查询结果所在的页数,以及每一页多少条查询结...
- 了解一下ProtoBuf(了解一下相亲对象的年龄)
-
序列化与反序列化我们在进行网络通信调用的时候,总是需要将内存的数据块经过序列化,转换成为一种可以通过网络流进行传输的格式。而这种格式在经过了传输之后再经过序列化,能还原成我们预想中的数据结构。那么我们...
- JSON数据类型详细总结(json数据类型详细总结怎么写)
-
JSON详解一、JSON的概述及其使用JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。它基于javascript的一个子集。JSON是的数据交换语言,易...
- 接口自动化测试之JSON Schema模式该如何使用?
-
JSONSchema模式是一个词汇表,可用于注释和验证JSON文档。在实际工作中,对接口返回值进行断言校验,除了常用字段的断言检测以外,还要对其他字段的类型进行检测。对返回的字段一个个写断言显...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)