什么是javaScript的EventLoop(事件循环)?EventLoop采用何种机制进行循环,用于解决什么?

详解JavaScript的运行机制:Event Loop(事件轮询机制) 前言 有人称Event Loop为事件循环机制,而我更愿意将其解释为事件轮询机制,在之后的内容中你会感受到这一点的区别在哪里。说是事件轮询机制,我们也可以说是任务轮询机制,因为英文是Event Loop,所以我们在此文中将其翻译为事件轮询。 阅读本文之前,首先对JavaScript的单线程和异步要有一定的了解,对此不了解的可以先阅读一下我的另一篇博文《JavaScript的单线程和异步》。 在讲J... 阅读详情

一、什么是EventLoop?

诚如翻译,eventloop就是事件循环,那么javascript究竟为何要采取这种方式进行事件的捕捉循环呢?这同样的使我们值得思考的一个问题。

1.1、javaScript是单线程。

首先我们必须要知道为什么javascript是单线程,在这里同样 阮一峰大神给我们讲解的很清楚 参考 阮一峰:JavaScript 运行机制详解:再谈Event Loop javascript因为什么而是一个单线程的语言呢?我们要了解 从web角度来讲 javascript是基于浏览器去运行的一个语言,而浏览器又是一个面向用户的语言,那么比对用户 我们不得不考虑的一个问题就是:
一个用户在同一时间只能做一件事情,他是不能去做两件事情的,而多线程的理念是什么,就是说在同一时间去干多种不同的事情。但是浏览器缺不行,因为不能说我利用多线程一个线程去干add增加操作,一个线程去做delete删除操作。首先这样去想就是不对的。
包括html5推出的Web Worker,允许创建多个线程,但是其根本上还是不能去操作节点的。

1.2、javaScript的同步、异步理念。

什么是同步?什么是异步?简单的来说:

声明一个变量 执行一个运算就是一个同步

执行一个计时器函数,ajax请求就是一个异步

为什么要有同步异步这个东西?

防止阻塞,而对应的JavaScript就是一个非阻塞的语言,我们试想一下,当去进行一个ajax请求时如果JavaScript是一个同步语言,没有异步这个概念的话,对应如果数据量很庞大,用户等待服务器返还时间需要多久呢?

我们不用过多的去思考同步异步这个问题,简单的来说需要时间去执行的就是异步任务在下方我们也会一一列出。

1.3、浏览器的事件循环(EventLoop)。

执行栈和事件队列

执行栈: 同步代码的执行,按照顺序添加到执行栈中。

事件队列: 异步代码的执行,遇到异步行为不会直接返还执行结果,而是将这个事件行为挂起(注意:挂起的同时也是在运行的),继续向下执行执行栈中的任务。当异步事件返回结果,将它放到事件队列中,被放入事件队列不会立刻执行起回调,而是等待当前执行栈中所有任务都执行完毕,主线程空闲状态,主线程会去查找事件队列中是否有任务,如果有,则取出排在第一位的事件,并把这个事件对应的回调放到执行栈中,然后执行其中的同步代码,当然的如果内部有异步代码,继续的会依照事件队列的执行顺序在执行一遍。

看下图 转自 JavaScript中的Event Loop(事件循环)机制
在这里插入图片描述

1.4、异步任务的宏任务、微任务。

宏任务:setTimeout、setInterval等。
微任务:promise、async等。

首先我们要知道为什么要区分异步任务?因为我们要区分优先级
微任务的优先级>宏任务的优先级

为什么?首先我们要知道一个点就是栈的执行机制是先进后出的,但是我们有时不免要出现插队的情况(高优先级先执行,是执行而不是返还先执行不意味着先返还,这个点很重要,不要理解错误。)

在这里也是补充下,下面这张图是没有对同步任务操作进行进栈出栈操作的,但是我们要知道,同步代码执行后,也是会立刻进入到执行栈当中,并且立刻出栈这样一个概念的。(主要也是以下原因:异步任务又分为宏任务和微任务,宏、微任务都是队列,而不是立刻入栈。微、宏任务都会各自创建一个队列,而主线程执行完以后,会优先执行微任务,把微任务全部放到执行栈中执行,最后再从宏任务中取出一个放入执行栈进行执行,执行完后,再取一个,直到执行完所有的宏任务。)所以说同步任务是优先于异步任务去在栈中执行的,因为本身执行栈是一个栈,但同步代码就又马上执行,所以会出现入栈后立即出战的这样一个机制,从而也不会出现同步代码压栈的情况。

一张图带你快速理解宏任务和微任务在任务队列中的区别 转自 深入理解js事件循环机制(浏览器篇):
在这里插入图片描述

总结:EventLoop究竟是什么,用于解决什么的?

Event Loop 是一个很重要的概念,指的也就是计算机系统的一种运行机制。JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题。

前端面试:JS中的Event Loop(事件循环)机制 阅读详情

相关推荐

【JS高阶】定时器、线程进程、事件循环EventLoop(/回流重绘)、Promise

1.宏任务(从上到下、从左到右的整体)2.微任务的Event Queue(Promise.then,async / await整体,process.nextTick【node环境】)3.宏任务的Event Queue(setTimeout / setInterval / setImmediate【node环境】)4.同一轮微任务队列中,依次顺序执行 process.nextTick 、queueMicrotask、Promise.then和async/await5.同一轮宏任务队列。

weixin_45179978的博客 912

事件循环 eventloop

进程 线程 CPU 分配资源的最小单位是进程,同一个时间内单个 CPU 只能运行一个进程,单个 CPU 一次只能运行一个任务 CPU 调度的最小单位是线程,一个进程里面包含多个线程。 可以看看阮老师的这篇文章,进程与线程的一个简单解释 浏览器的进程 浏览器主进程 负责界面展示,用户交互,子进程管理,文件存取等 插件进程 GPU 进程 3d绘制 网络进程 渲染进程 主要负责将 HTML, CSS, JavaScript 转换为用户可交互的网页,排版引擎 Blink 和 JavaScript

Hiraku_Ma的博客 982

scGPT-spatial 复现

文章摘要:Spatial scGPT项目复现流程 本文详细介绍了复现Spatial scGPT项目的完整流程,包含数据预处理、模型训练等关键步骤。首先需要使用scanpy加载H5AD文件并进行归一化、对数变换等预处理。然后构建基因词汇表(vocab),提取基因表达值和空间坐标信息。接着使用DataCollator进行数据分箱、掩码和填充处理。最后搭建TransformerModel进行训练。文章特别指出了需要自行补全的缺失部分,包括基因词汇表构建、空间坐标提取、数据集类定义和训练主循环脚本等。作者还提供了详

victory0431的博客 1683

JavaScript的运行机制

JavaScript的运行机制

m0_47584501的博客 3862

UI-TARS桌面版模型部署

在 UI-TARS 中配置 VLM(视觉语言模型)模型,无论是选择云端(Hugging Face)还是本地(vLLM)部署,都需要经过一系列步骤,下面为你详细展开介绍。

二琳爱吃肉的博客 4539

STC32G电调调试血泪史:从TPH1R403NL MOS管烧毁到PWM信号异常排查全记录

本文详细记录了STC32G无刷电调调试过程中的常见问题与解决方案,包括MOS管烧毁、PWM信号异常等关键故障排查。通过电源系统检测、驱动电路验证及三相平衡调试等实战经验,帮助硬件爱好者快速定位问题,提升电调调试效率。特别针对TPH1R403NL等MOS管的保护措施进行了重点分析。

weixin_33736048的博客 551

【Promise】阮一峰JavaScript教程-7-异步操作

JavaScript是单线程模型,只在一个线程上运行。JavaScript引擎有多个线程,单个脚本只能在一个线程上运行。为避免复杂性,JavaScript一开始就是单线程,将来也不会改变。优点:实现起来比较简单,执行环境相对单纯,缺点:只要有一个任务耗时很长,后面的任务就得排队等着,会拖延整个程序的执行。JavaScript语言本身不慢,慢的是读写外部数据,比如等待Ajax请求返回结果。Promise对象是JavaScript的异步操作解决方案,为异步操作提供统一接口。

qq_37581764的博客 1716

Django Cookie/Session

Cookie是一种小型的文本文件,通常由Web服务器发送到用户浏览器,并存储在用户的本地计算机上。当用户再次访问该网站时,浏览器会将Cookie发送回服务器,从而实现用户身份验证、个性化设置等功能。Session是一种在服务器端存储用户会话信息的方式。与Cookie不同,Session数据存储在服务器上,而不是客户端。Django框架通过在客户端存储一个Session ID来实现Session的跟踪。Django框架的Cookie/Session机制为开发者提供了方便的数据存储和会话管理功能。

froginwe11的博客 467

浏览器Event Loop机制-宏任务与微任务

前言 阮一峰一篇文章讲过,Event Loop 是在程序中设置两个线程:一个负责程序本身的运行,称为"主线程";另一个负责主线程与其他进程(主要是各种I/O操作)的通信,被称为"Event Loop线程"。这也是解释js即使是单线程的,但如果运用好他的Event Loop机制,开发的程序依然能够提供很好的体验效果。 任务分类 如下图左边是宏任务分类,右边是微任务分类。 代码 console.log("start"); setTimeout(() => { console.log("setTim

weixin_43822182的博客 999

SOI技术实战:从晶圆结构到芯片性能提升的完整解析

本文深入解析SOI(Silicon on Insulator)技术如何通过独特的三明治晶圆结构提升芯片性能,涵盖从220nm SOI层设计到7nm节点的工艺挑战。详细探讨了埋氧层的绝缘优势、性能提升的物理机制,以及AMD处理器和5G射频中的实战应用,为半导体行业提供关键技术洞见。

wdx0123456的博客 960

【Bug已解决】Claude Code WebFetch 报错 Unable to verify if domain is safe to fetch 解决方案

方案适用场景推荐指数放行域名校验接口根本解决方式,需要网络管理员配合⭐⭐⭐⭐⭐curl 手动验证具体拦截环节精确定位问题,避免排查方向跑偏⭐⭐⭐⭐⭐排查企业 SSL 中间人代理证书企业统一代理策略较严格的环境⭐⭐⭐⭐检查系统时间准确性排除证书有效期误判的可能性⭐⭐⭐手动复制内容作为过渡方案网络策略调整周期较长的场景⭐⭐⭐报错的本质是**WebFetch。

一键难忘的博客 4503

EventLoop 事件循环机制

Event Loop 在JavaScript中,任务被分为两种,一种宏任务(MacroTask)也叫Task,一种叫微任务(MicroTask)。

Dark_programmer的博客 7488

实验7:机器学习油田产量预测-代码数据-完整代码数据可直接运行-计算机毕设

实验7:机器学习油田产量预测-代码数据-完整代码数据可直接运行-计算机毕设

机器学习深度学习业余选手 479

事件循环机制EventLoop

事件循环机制EventLoop Event Loop即事件循环,是解决javaScript单线程运行阻塞的一种机制。 一、EventLoop的相关概念 1、堆(Heap) 堆表示一大块非结构化的内存区域,对象,数据被存放在堆中 2、栈(Stack) 栈在javascript中又称执行栈,调用栈,是一种后进先出的数组结构, Javascript 有一个 主线程(main thread)和 调用栈(或执行栈call-stack),主线各所有的任务都会被放到调用栈等待主线程执行。 JS调用栈采用的是后进先出的规

一条单行线 8829

某招标公告网和vcaptcha验证码识别逆向

本文分析了某验证码系统的加密流程及破解思路。首先通过反混淆技术定位到加密函数,拆解了包含指纹函数、环境参数等组成的加密字符串。研究发现验证码生成涉及canvas指纹、环境检测等反爬机制,可通过模拟浏览器环境绕过。验证过程需要解密图片顺序,通过work2.js计算还原图片位置,再结合滑动轨迹、时间等参数生成验证请求。文章仅提供技术研究思路,强调需遵守法律法规,严禁非法破解信息系统。完整流程包括环境模拟、加密参数还原、图片处理和轨迹生成等步骤,成功率较高。

码王吴彦祖的博客 578

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

JavaScript:事件循环机制(EventLoop)

当一个宏任务中产生了微任务,这些微任务会先被放到一个专门的队列中,等待当前宏任务执行完毕时再执行。而在执行这些微任务时,如果又产生了新的微任务,这些新的微任务会被放到队列的末尾,等待执行。当当前任务执行完成后,在下一个事件循环的开始,JavaScript会从任务队列中取出一个任务,执行该任务。然后再执行宏任务队列中的任务。总的来说,JavaScript通过事件循环机制来实现异步操作,将异步任务放到任务队列中,然后在任务队列中等待执行,直到JavaScript引擎空闲,再将任务队列中的任务拿出来执行。

snow的博客 1万+

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

理解JS的事件循环机制(Event Loop)

JS是单线程语言,但是又可以做到异步处理高并发请求,这时就用到了JavaScript的事件循环机制。

铁锤妹妹的博客 7494

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

Javascript中的事件循环机制详解

事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。JavaScript中的事件循环是一种异步执行机制,作用是协调和管理各种异步任务的执行顺序,以确保JavaScript代码执行的顺序和预期一致。代码在执行时会先执行同步任务,而异步任务则被放入任务队列中等待执行。事件的循环机制会不断地检查任务队列中是否有任务需要执行,如果有,则将任务取出并执行。在执行异步任务时,引擎会挂起当前任务的执行,去执行异步任务,等到异步任务执行完成后,再回到之前的任务继续执行。

Dreamweaver_Bob的博客 5048

事件循环机制(Eventloop)

在JavaScript的执行环境中,事件循环(Event Loop)是实现非阻塞异步执行的关键机制。它由主线程(也称为调用栈)和任务队列(Event Queue)组成,这两个组件协同工作以确保同步和异步任务的有序执行。文章结尾附上真题解析主线程(Call Stack):这是JavaScript引擎执行同步代码的场所。当代码被执行时,同步任务会被压入调用栈中,按照后进先出(LIFO)的原则依次执行。任务队列(EventQueue):这是一个先进先出(FIFO)的数据结构,用于存储异步任务的回调函数。

weixin_44735965的博客 2790

EventLoop 事件循环机制详解

首先清楚javaScript这门语言是一门单线程非阻塞的脚本语言。 单线程是指在执行javascript代码的时候,只有一个主线程按照一定的顺序执行任务。 非阻塞是指当代码需要进行一项异步任务,的时候,主线程会挂起这个任务,然后在异步结果返回时根据一定规则执行相应的回调。 javascript使用单线程其实是有原因的,单线程的缺点也是很明显的, ...

weixin_45111619的博客 2668

JavaScript 事件循环机制(Event Loop)简述

JavaScript 是浏览器的脚本语言。其主要作用是与客户端进行交互。最开始设计之初它就是单线程。因为它主要操作 DOM。如果设计成多线程,假设一个线程在操作某个 DOM 节点,一个线程又在删除这个 DOM 节点。这时候浏览器就无法判断以哪个线程为主,这种复杂的场景大大增加了语言的难度。所以 JavaScript 从一诞生就是单线程。也是它最重要的特性之一。

杏子 1万+

什么是eventloop(事件循环)?

关于eventloop事件循环的理解,还有栈队列堆的理解,单线程eventloop和多线程模型的比较

qzwzsl的博客 2280

事件循环机制 => EventLoop详解

我们都知道 Js 是单线程都,但是一些高耗时操作就带来了进程阻塞问题。为了解决这个问题,Js 有两种任务的执行模式:同步模式(Synchronous)和异步模式(Asynchronous)。在异步模式下,创建异步任务主要分为宏任务与微任务两种。ES6 规范中,宏任务(Macrotask) 称为 Task, 微任务(Microtask) 称为 Jobs。宏任务是由宿主(浏览器、Node)发起的,而微任务由 JS 自身发起。宏任务与微任务的几种创建方式。

2401_84123265的博客 1265

事件循环机制 (EventLoop)

事件循环机制 (EventLoop):是js的一个底层运行原理,js是单线程的,但是也有一些耗时任务,会影响执行效率,代码都在主线程中执行,当遇见你像ajax请求.setTimeout 定时器时候,会 单独开启异步线程.异步线程耗时之后会推入异步队列中等待执行.然后当主线程执行完毕之后.会到异步队列中取出到主线程中执行.然后再去异步队列中取第二个.这个来回取的过 程就是您所说的事件循环(eventLoop) lE.

qq_48294048的博客 2167

JavaScript 事件循环(EventLoop) —— 浏览器 & Node

JavaScript 事件循环(EventLoop) —— 浏览器 & Node

weixin_43822185的博客 1018
上一篇: vue 进入到一个新路由页面后,路由组件页面缓存,如何实现路由组件刷新重载?
下一篇: 如何在H5移动端页面中调起手机拨打电话功能?
归来巨星
归来巨星 新星创作者: 前端开发技术领域 新星创作者: 前端开发技术领域
博客等级 码龄7年 5391粉丝 95原创
评论 13
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

归来巨星

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

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

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

打赏作者

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

抵扣说明:

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

余额充值