JS 事件循环(Event Loop)机制

事件循环机制的作用

事件循环机制是 JS 的一种执行机制,一种可以实现异步编程的机制。

因为 JS 是单线程的,单线程意味着所有任务需要排队执行。但是有一些 API(比如:定时器和 Ajax 等)是需要等待一定的时间才能得到结果的,如果它们按顺序执行,会造成很大的效率问题。因此,JS 采取了异步编程,凡是需要等待的操作,都会交给浏览器或 NodeJS 进行挂起,等同步代码执行完毕后再执行异步操作。这个过程就需要用到事件循环机制来进行操作的调度。

事件循环机制的原理

事件循环机制将所有代码分为同步任务和异步任务异步任务又分为宏任务和微异步。事件循环机制就是围绕同步任务、宏任务、微任务的执行时机展开的。

同步任务在调用栈中执行,异步任务在任务队列中执行。

常见的宏任务
  • 整体代码(<script>) :整个脚本代码块的执行可以视为一个宏任务
  • setTimeout / setlnterval:定时器回调函数属于宏任务
  • setlmmediate (Node.js环境): Node.js 独有的宏任务接口,表示下一次事件循环迭代开始时执行的任务
  • I/O 回调:如网络请求、文件读写等异步 I/O 操作完成后的回调函数
  • UI 渲染:浏览器环境中的渲染操作,如重绘(repaint)和回流(reflow)
  • MessageChannel:使用 MessageChannel 进行跨文档消息传递时的回调
  • MutationObserver:虽然 MutationObserver 的行为更像是微任务,但它实际上是在 UI 渲染之后执行的,可以看作是宏任务的一部分(因为它依赖于 UI 更新)
常见的微任务
  • Promise.then/catch/finally:Promise对象的回调函数。(Promise构造函数的参数中的代码是同步的,.then 回调函数的内容是异步的)
  • MutationObserver 回调:虽然它在宏任务之后执行,但其回调属于微任务
  • Process.nextTick (Node.js环境):Node.js 环境提供的微任务接口,确保回调函数在当前宏任务结束前执行
  • async/await:async function 内部的 await 表达式之后的代码块会在下一个微任务中执行

事件循环机制的执行流程

  • 初始化:当 JS 引擎启动时,首先会创建全局执行上下文并压入调用栈。初始化任务队列,包括微任务队列和宏任务队列
  • 执行同步代码:使用调用栈执行同步代码,遇到宏任务放入宏任务队列,遇到微任务放入微任务队列。
  • 执行微任务:当全局上下文中的所有同步代码执行完毕后,会首先处理所有待执行的微任务
  • 渲染(浏览器环境):清空微任务队列后,浏览器会尝试进行渲染操作,更新页面视图。
  • 执行宏任务:渲染之后,事件循环会从宏任务队列中取出一个宏任务来执行。 每个宏任务内部也会先执行其同步代码,同样遇到宏任务放入宏任务队列,遇到微任务放入微任务队列。
  • 执行微任务:若上一步宏任务中产生微任务,微任务队列不为空,需处理所有待执行的微任务
  • 渲染
  • 执行宏任务
  • 循环迭代:事件循环不断在宏任务队列和微任务队列间切换,执行任务,直至两个队列都为空

浏览器执行的时候,所有的js代码都会被解析到<script>标签中,而<script>标签又是一个宏任务,所以整个事件循环机制可以看作是在解析一个全局的宏任务。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49799.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python】一文向您详细介绍 K-means 算法

【Python】一文向您详细介绍 K-means 算法 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通本硕&#xff…

Visual Studio 2022新建 cmake 工程测试 tensorRT 自带样例 sampleOnnxMNIST

1. 新建 cmake 工程 vs2022_cmake_sampleOnnxMNIST_test( 如何新建 cmake 工程&#xff0c;请参考博客&#xff1a;Visual Studio 2022新建 cmake 工程测试 opencv helloworld ) 2. 删除默认生成的 vs2022_cmake_sampleOnnxMNIST_test.h 头文件 3. 修改默认生成的 vs2022_cma…

【 C语言 】 C语言设计模式

一 、C语言和设计模式&#xff08;继承、封装、多态&#xff09; C有三个最重要的特点&#xff0c;即继承、封装、多态。我发现其实C语言也是可以面向对象的&#xff0c;也是可以应用设计模式的&#xff0c;关键就在于如何实现面向对象语言的三个重要属性。 &#xff08;1&…

BSV区块链在人工智能时代的数字化转型中的角色

​​发表时间&#xff1a;2024年6月13日 企业数字化转型已有约30年的历史&#xff0c;而人工智能&#xff08;以下简称AI&#xff09;将这种转型提升到了一个全新的高度。这并不难理解&#xff0c;因为AI终于使企业能够发挥其潜力&#xff0c;实现更宏大的目标。然而&#xff0…

MySQL中实现动态表单中JSON元素精准匹配的方法

目录 前言 一、动态表单技术 1、包含的主要信息 2、元素属性设置 3、表单内容 二、表单数据存储和查询 1、数据存储 2、数据的查询 3、在5.7版本中进行JSON检索 4、8.0后的优化查询 三、总结 前言 在很多有工作流设置的地方、比如需要在不同的流程中&#xff0c;需要…

什么是跨域问题及其解决方案

什么是跨域问题及其解决方案 在现代Web开发中&#xff0c;跨域问题是一个常见的挑战。了解什么是跨域问题以及如何解决它&#xff0c;对于开发者来说至关重要。在这篇博客中&#xff0c;我们将详细介绍什么是跨域问题&#xff0c;并探讨几种常用的解决方案。 什么是跨域问题&…

Docker 搭建GitLab

# 拉取镜像 docker pull gitlab/gitlab-ce # GitLab 需要持久存储来保存数据&#xff0c;如仓库数据、配置 mkdir -p /opt/gitlab/config /opt/gitlab/logs /opt/gitlab/data # 使用 docker run 命令来启动 GitLab 容器 docker run -itd \--hostname 192.168.111.128 \--p…

服务器数据恢复—V7000存储硬盘故障脱机的数据恢复案例

服务器存储数据恢复环境&#xff1a; 某品牌P740小型机AIXSybaseV7000磁盘阵列柜&#xff0c;磁盘阵列柜中有12块SAS机械硬盘&#xff08;其中包括一块热备盘&#xff09;。 服务器存储故障&#xff1a; 磁盘阵列柜中有一块磁盘出现故障&#xff0c;运维人员用新硬盘替换掉故障…

网络安全等级保护解决方案的主打产品

网络安全等级保护解决方案的主打产品&#xff1a; HiSec Insight安全态势感知系统、 FireHunter6000沙箱、 SecoManager安全控制器、 HiSecEngine USG系列防火墙和HiSecEngine AntiDDoS防御系统。 华为HiSec Insight安全态势感知系统是基于商用大数据平台FusionInsight的A…

【LeetCode】201. 数字范围按位与

1. 题目 2. 分析 这题挺难想的&#xff0c;我到现在还没想明白&#xff0c;为啥只用左区间和右区间就能找到目标值了&#xff0c;而不用挨个做与操作&#xff1f; 3. 代码 class Solution:def rangeBitwiseAnd(self, left: int, right: int) -> int:left_bin bin(left).…

lightningcss介绍及使用

lightningcss介绍及使用 一款使用 rust 编写的 css 解析器&#xff0c;转换器、及压缩器。 特性 特别快&#xff1a;可以在毫秒级别解析、压缩大量的 css 文件&#xff0c;而且比其他工具的打包结果更小给值添加类型&#xff1a;许多其他css解析器会将值解析成一个无类型的 …

k8s集群可视化工具安装(dashboard)

可视化安装 2.1、下载相关的yaml文件 wget https://raw.githubusercontent.com/kubernetes/dashboard/v2.0.0/aio/deploy/recommended.yaml Vim recommended.yaml 2.2、部署 kubectl apply -f recommended.yaml 查看那kubernetes-dashboard命令空间下的资源 kubectl get …

ZLMRTCClient配置说明与用法(含示例)

webRTC播放视频 后面在项目中会用到通过推拉播放视频流的技术&#xff0c;所以最近预研了一下webRTC 首先需要引入封装好的webRTC客户端的js文件ZLMRTCClient.js 下面是地址需要的自行下载 http://my.zsyou.top/2024/ZLMRTCClient.js 配置说明 new ZLMRTCClient.Endpoint…

技术分享!国产ARM + FPGA的SDIO通信开发介绍!

SDIO总线介绍 SDIO(Secure Digital lnput and Output),即安全数字输入输出接口。SDIO总线协议是由SD协议演化而来,它主要是对SD协议进行了一些扩展。 SDIO总线主要是为SDIO卡提供一个高速的I/O能力,并伴随着较低的功耗。SDIO总线不但支持SDIO卡,而且还兼容SD内存卡。支持…

韦东山嵌入式linux系列-具体单板的按键驱动程序(查询方式)

1 GPIO 操作回顾 &#xff08;1&#xff09;使能模块&#xff1b; &#xff08;2&#xff09;设置引脚的模式&#xff08;工作于GPIO模式&#xff09;&#xff1b; &#xff08;3&#xff09;设置GPIO本身&#xff08;输入/输出&#xff09;&#xff1b; &#xff08;4&…

在VMware创建Ubuntu24

目录 一、创建虚拟机 1. 自定义创建虚拟机 2. 设置虚拟机兼容 3. 选择镜像 4. 命名虚拟机&#xff0c;选择存放位置 5. 处理器配置 6. 内存配置 7. 网络类型配置 8. I/O控制器类型 9. 磁盘配置 10. 完成虚拟机创建 二、Ubuntu安装 1. 进入虚拟机中进行ubuntu的安…

浏览器打开PDF卡在加载(侧边翻译插件打不开PDF)

如果你的浏览器安装了一些翻译插件&#xff0c;那么可能会导致PDF加载不出来 比如我的浏览器中安装了“侧边翻译”&#xff0c;而我在view Elsever的论文时出现了加载不出来的问题—— 仍然以此扩展为例&#xff0c;那么解决办法是&#xff1a; 取消勾选——

Docker简单快速入门

1. 安装Docker 基于 Ubuntu 24.04 LTS 安装Docker 。 # 更新包索引并安装依赖包 sudo apt-get update sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common# 添加Docker的官方GPG密钥并存储在正确的位置 curl -fsSL https://mirror…

【屏显MCU】多媒体接口总结

本文主要介绍【屏显MCU】的基本概念&#xff0c;用于开发过程中的理解 以下是图层叠加示例 【屏显MCU】多媒体接口总结 0. 个人简介 && 授权须知1. 三大引擎1.1 【显示引擎】Display Engine1.1.1 【UI】 图层的概念1.1.2 【Video】 图层的概念1.1.3 图层的 Blending 的…

C++ 学习补充 1:短链算法

短链算法 短链算法&#xff1a; 将长链接 转化为 一个短key 之所以不是短url 是因为 &#xff0c;url 短链不区分大小写&#xff0c;可用空间比较小。 短链算法通常用于将一个长网址转换成一个较短的字符串&#xff0c;以便于分享和存储。这种算法通常需要满足以下条件&#…