事件循环机制:JavaScript被设计为单线程,那如何做到异步的呢?
myzbx 2025-01-10 15:41 38 浏览
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:基本概念之事件
- 下一篇:关于马金瑜网络舆情相关情况的调查通报
相关推荐
- 下一代EUV光刻机,万事俱备?(下一代光刻技术)
-
光刻机在半导体领域一向是个热门话题,这个能一次又一次突破工艺极限的设备仿佛一个时光机器,连接着芯片的现在和未来。从ASML宣布将推出下一代光刻机开始,人们的目光就从当前最新一代的0.33NA光刻系...
- 鸿蒙NEXT-状态管理V1和状态管理V2的差别
-
1.在V2中没有了@Link,来进行父组件和子组件的双向绑定。所以我们需要在子组件中通过@Event,调用父组件的事件,来实现装饰回调(白话来讲就是:子组件调用@Event装饰的函数,传入参数,修改父...
- 15个Excel工作表技巧,效率必备,办公必备
-
在数据的统计分析中,最常用的办公软件就是Office中的Excel,如果你对Excel的应用技巧掌握较少,可以从学习本文开始。一、Excel工作表技巧:锁定标题行方法:将光标定位到标题行下面的任意单...
- 苹果这个新的稳定平台适合用户/开发者测试
-
苹果好低调地就发布了这个平台,还好我们没有错过。从今天起你将有一种新的、更简便的方式去了解,Safari和其他使用Webkit的应用中将有什么特性和完善。SafariTechnologyPr...
- 教程|PPT绘制箭头最全攻略,收藏一下
-
微信公众号:有宝物的柜子编辑:落水无波2020-05-02原创由于没有较好的方向,公众号的更新一直暂停,根据昨天的留言,今天更新一篇关于绘制各类箭头的PPT教程,希望帮到需要的同学。那么,我们从最简...
- 老板让我制作动态图表,我不会,同事说用vlookup函数3步就搞定了
-
大家好,动态图表你会制作吗?是不是觉得动态图表制作起来应该非常的麻烦?其实并不是,大家熟悉的vlookup函数就可以用来制作动态图表,操作也非常的简单,下面就让我们来一起操作下吧COLUMN函数在这里...
- ES6(ECMAScript 2015)主要特性一览
-
下面按“语法糖”“新数据类型/API”“异步&迭代”三大类,总结ES6的核心要点。---##一、语法糖-块级作用域:`let`、`const`-`let`:声明块级变量,不可...
- Excel工作表中F1—F12应用技巧解读,再不会就Out了
-
键盘中,有一组非常显眼的功能键,就是F1—F12,其功能非常的强大,在Excel工作表中也有特别重要的作用,通过本文的学习,相信你一定有所了解。一、Excel工作表功能键:F1。功能:打开帮助对话框...
- es6的模块和核心语法(es6模块化的语法)
-
目标:通过本教案,将掌握ES6的核心语法和模块化概念,理解解构表达式的用法,并初步了解Node.js的使用,为学习Vue3打下坚实的基础。学习内容:ES6核心语法模块化解构表达式Nod...
- ECMAScript标准制定过程展示及ES7新特性披露
-
2015年6正式发布的ES6是ECMAScript的最新版本,它的发布具有里程碑意义,不仅带来了众多的新特性,而且自此将改变ECMAScript的发布策略。本文将会介绍ECMAScript标准的最新...
- 冲激函数的理解(冲激函数的性质有哪些问题)
-
一、冲激函数是什么?1.通俗理解想象一根理想化的针:长度无限小(宽度为0)高度无限大(强度无限)但总面积(能量)=1这就是冲激函数δ(t)!类比:用针尖瞬间触碰水面→产生一个无限高但宽度为...
- 前端常见面试 - 请求篇(前端面试经典问题)
-
对于前端来说,请求是前端日常工作必备的,通过请求才能与后端进行数据交互,尤其在现在前后端分离的开发模式下,请求显得就更加重要。因此,对于前端开发者来说,掌握请求就很重要。下面将从http请求和常见...
- 不会js中原型、原型链与constructor到底是什么?
-
关注我:知码前端,获取更多前端知识~~~前言哇呀呀~我说寒山说哭我带你出我敬滴酒带你出我欲成冰再也无退路怎舍寒冰冰冻我心哭~~~Hello,广大的前端小伙伴们,又到了写文章的时候,我们说一下在...
- 你真的懂js的执行上下文吗?(详细说明js的执行过程)
-
JavaScript执行上下文目录JavaScript执行上下文前言概念执行上下文的特点JS如何管理多个执行上下文执行栈执行上下文的生命周期创建阶段ThisBinding词法环境变量环境执行阶段销...
- 停止滥用箭头函数:这5个场景请务必使用 function
-
自ES6问世以来,箭头函数(ArrowFunctions)以其简洁的语法和对this的词法绑定,迅速成为了JavaScript开发者的“新宠”。我们似乎倾向于在任何可以使用函数的地方都换...
- 一周热门
- 最近发表
- 标签列表
-
- 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)