当前位置：首页 > news >正文

【JS事件循环机制event-loop】

news 来源：原创 2025/5/28 4:13:20

0、总结

Tasks execute in order, and the browser may render between them 【宏任务按序执行，浏览器可以在它们之间进行渲染】
Microtasks execute in order, and are executed:【微任务按序执行，执行与如下时刻：】
- after every callback, as long as no other JavaScript is mid-execution【每次回调后，只要没有其他 JS 处于执行过程中】
- at the end of each task【在每次宏任务的末尾】

# 进程是 CPU 资源分配的最小单位（是能拥有资源和独立运行的最小单位）；
# 线程是 CPU 调度和分派的基本单位，共享进程的内存空间和资源，每个线程有自己的栈空间和程序计数器；
# 浏览器每打开一个 tab 页，就是开了一个进程；

1、Event-Loop 概念

事件循环是浏览器或 node 环境执行 js 代码的一种规则
同步任务都在 JS 引擎线程（主线程）上执行，形成一个执行栈
事件触发线程管理着一个任务队列(宏任务队列)，异步任务有了运行结果，就在任务队列中放置一个事件
什么时候用到定时器触发线程？当使用setTimeout或setInterval时，需要定时器触发线程计时，计时完成后就会将特定的事件推入事件队列中。
- 为什么要单独的定时器触发线程？因为 JavaScript 引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确，因此很有必要单独开一个线程用来计时。
一旦执行栈中的所有同步任务执行完毕（此时 JS 引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

为什么有时候setTimeout推入的事件不能准时执行？因为可能在它推入到事件列表时，主线程还不空闲，正在执行其它代码，所以自然有误差。
- 主线程运行时会产生执行栈，栈中的代码调用某些 api 时，它们会在事件队列中添加各种事件（当满足触发条件后，如 ajax 请求完毕）
- 而栈中的代码执行完毕，就会读取事件队列中的事件，去执行那些回调
- 如此循环

2、宏任务-微任务

好文章：Tasks,microtasks,queues and schedules
js 代码分为两类：同步代码、异步代码
异步代码又分为：宏任务(macrotask)、微任务(microtask) ，在 ECMAScript 中macrotask称为task、microtask称为jobs
浏览器会在一个task执行结束后，在下一个task执行开始前，对页面进行重新渲染

microtask 微任务都是添加到微任务队列（Job Queues）中，等待当前 macrotask 执行完毕后执行，而这个队列由 JS引擎线程 维护

任务	类别
事件	宏任务
setTimeout	宏任务
setInterval	宏任务
setImmediate(Node 独有)	宏任务
requestAnimationFrame(浏览器独有)	宏任务
网络请求	宏任务
fs.readFile()	宏任务
UI rendering(浏览器独有)	宏任务
Promise.then()	------微任务
async/await	------微任务
process.nextTick(Node 独有)	------微任务
Object.observe	------微任务
MutationObserve	------微任务

3、事件循环执行机制

进入 script 标签,就进入到第一次事件循环（可看作一个宏任务开始）
遇到同步代码立即执行
遇到宏任务放到宏任务队列
遇到微任务放到微任务队列
执行完所有同步代码
执行微任务
微任务执行完毕，本次主线程执行栈清空，开始检查渲染，然后 GUI 线程接管渲染
渲染完毕后，JS引擎线程继续接管，寻找下一个宏任务,重复上述步骤，这种重复不断的机制，就叫做事件循环

我们在一个微任务中使用 setTimeout() 函数添加一个宏任务，那么这个新的宏任务会在当前微任务执行完毕后立即执行，而不是等待当前宏任务执行完毕再执行。

在这里插入图片描述

4、调用栈

调用栈 call stack 也叫执行栈，记录了当前执行的上下文 context 和函数调用链;
所有函数想要执行就必须经过调用栈，因为调用栈可以理清词法环境、变量环境等;
当 js 引擎执行一个函数时，它会将函数的调用信息添加到调用栈的顶部，并在执行完该函数后从调用栈中弹出该函数的信息。如果该函数调用了其他函数，那么这些函数也会依次被添加到调用栈中，并在执行完后弹出。在函数执行期间，调用栈会保持不断增长和收缩的状态。

5、示例

async function async1() {console.log(111) //1await async2() //await会阻塞它下一行的代码await async3() //异步代码中的微任务1，先挂起console.log('async111 end') //7 微任务3 等async3执行完毕后进入任务队列
}
async function async2() {console.log('async222 end') //2
}
async function async3() {console.log('async333 end') //5
}
async1()
setTimeout(() => {//异步代码中的宏任务1，先挂起console.log('setTimeout') //9
}, 0)
new Promise((resolve) => {console.log('Promise') //3resolve()
}).then(() => {//异步代码中的微任务2，先挂起console.log('Promise111') //6}).then(() => {//异步代码中的微任务4，先挂起  前一个.then的回调函数执行后被进入任务队列console.log('Promise222') //8})
console.log('end') //4

在这里插入图片描述

【JS事件循环机制event-loop】

目录 0、总结1、Event-Loop 概念2、宏任务-微任务3、事件循环执行机制4、调用栈5、示例 0、总结 Tasks execute in order, and the browser may render between them 【宏任务按序执行，浏览器可以在它们之间进行渲染】Microtasks execute in order, and are execut…...

编程日记 2025/5/28 4:13:20

对比N+1查询和关联聚合查询

通常我们管第一种模式叫 “N1 查询”，第二种叫 “关联聚合查询”。下面从几个角度来比较，帮助你做出选择。 1. 性能与资源消耗方案SQL 语句数网络往返次数数据库负载Java 处理N1 查询（先查项目，再遍历项目查设备状态数&#xff…...

编程日记 2025/4/29 6:32:17

优化 Flutter 应用启动：从冷启动到就绪仅需 2 秒

冷启动序列剖析：冷启动时，Flutter 应用需经历引擎和 Dart VM 初始化、启动 Dart Isolate、渲染第一帧等步骤。Android 和 iOS 系统分别通过启动屏幕和 Storyboard 缓解启动延迟。应用大小、初始化工作、调试模式下的 JIT 编译等因素会影响冷启动时间。优…...

编程日记 2025/5/28 3:21:43

牟乃夏《ArcGIS Engine 地理信息系统开发教程》学习笔记 4-空间分析与高级功能开发

目录一、核心组件与接口回顾 （一）空间分析基础架构 （二）网络分析模块二、矢量数据空间分析实战 （一）缓冲区分析 （二）叠加分析（以裁剪为例） 三、栅格…...

编程日记 2025/5/28 4:02:47

UE 滚动提示条材质制作

需要两个贴图先制作条纹屏闪这里RGB输出连到alpha，0为白色，到1就为黑色了因为这个图片是RGB输出代表三个图片，看贴图颜色就知道了，然后把这三个相加一下；链接自发光颜色， 这里设置速度变量通过网盘分…...

编程日记 2025/5/28 1:34:08

金融业数字化转型——深入解读77页2024年中国金融体系指标大全【附全文阅读】

本文主要介绍了金融业通行宝典中国金融体系指标大全的内容，包括央行体系、商业银行体系、非银金融机构与地方金融组织的各项指标。文章详细分析了美联储资产负債表的结构，并概述了美日欧等主要经济体资产负债表状况。重点内容： 1. 央行体系是金融分析的重点。 2. 美联储资产…...

编程日记 2025/5/28 3:59:55

研究:大模型输出一致性：确定性与随机性的场景化平衡

大模型在相同输入下的输出是否一致，本质上取决于其设计目标、任务性质以及技术实现方式。这一问题需要从技术原理、应用场景、用户需求三个维度进行深度分析：一、技术实现：确定性与随机性的平衡模型架构的确定性基础大模型的核心参数（如权重矩阵）在训练完成后是固定的…...

编程日记 2025/5/28 3:19:12

数据分析1

一、常用数据处理模块Numpy Numpy常用于高性能计算，在机器学习常常作为传递数据的容器。提供了两种基本对象：ndarray、ufunc。 ndarray具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组。 ufunc提供了对数组快速运算的标准数学函数。 ndar…...

编程日记 2025/4/29 6:31:10

vmare pro安装报错用户在命令行上发出了EULAS_AGREED=1，表示不接受许可协议的错误解决方法

问题现状和原因用户在命令行上发出了EULAS_AGREED1，表示不接受许可协议的错误。以上错误主要原因是因为机器安装过了vmare 卸载时没有卸载干净导致的。解决方法： 1、控制面板-程序和功能-卸载程序。找到vamre卸载掉。 2、打开开始菜单输入注册表 …...

编程日记 2025/5/28 4:04:34

《Linux篇》基础开发工具——vim详细介绍

文章目录 1.软件包管理1.1 什么是软件包1.2 Linux软件生态 2.编辑器vim2.1 vim的正常/命令模式2.2 vim的末行模式2.3 vim的插入模式 3.配置vim 1.软件包管理我们先来看一下再Linux是那个如何安装软件？ 源码安装：软件是存在相互依赖的关系的&#xff0…...

编程日记 2025/5/28 1:35:31

AI图片跳舞生成视频，animate X本地部署。

本期内容打包限时免费下载https://www.kdocs.cn/l/cnQ5lNU5DFZB 对比不同算法，使用同一组图片和舞蹈视频。animate X官网，下载项目解压。按照官方教程下载模型，项目包和命名好的模型包已上传网盘，放到解压目录下即可。安装好cond…...

编程日记 2025/5/28 3:48:09

Web技术与Apache网站部署

一、Web 基础与 HTTP 协议 1.1 静态网页与动态网页静态网页定义：由纯 HTML、CSS、JavaScript 构成，文件扩展名为 .htm 或 .html。内容在服务器生成后固定不变，仅通过客户端脚本（如 JS）实现视觉动态效果&#xff08…...

编程日记 2025/5/28 1:29:27

第七章：Server/Client Communication

Chapter 7: Server/Client Communication 从工具集成到服务器通信：如何让AI“远程协作”？ 在上一章的工具与LLM集成中，我们已经能让AI调用真实世界的工具。但你是否想过：如果多个用户同时请求天气查询，或者需要远程控…...

编程日记 2025/5/28 4:09:46

Linux调试器 - gdb使用指南

目录一、背景知识二、开始使用 gdb （一）查看源代码相关指令 （二）程序执行控制指令 （三）断点相关指令 （四）变量操作相关指令 （五）其他常用指令在Li…...

编程日记 2025/5/28 4:05:50

C++面试常青客：LRUCache最近最少使用算法

C面试常青客：LRUCache最近最少使用算法文章目录 C面试常青客：LRUCache最近最少使用算法1.背景🏆2.原理🚀2.1基本原理2.2核心特性 3.结构3.1为什么需要 list<pair<int,int>>（双向链表）&#xf…...

编程日记 2025/5/28 1:34:08

【含文档+PPT+源码】基于微信小程序的社交摄影约拍平台的设计与实现

项目介绍本课程演示的是一款基于微信小程序的社交摄影约拍平台的设计与实现，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系…...

编程日记 2025/5/28 1:31:17

jetson nano上Ubuntu系统调用摄像头bug

今天在做一个比赛的时候，通过调用摄像头做检测并输出目标角度和距离。刚开始用的是 cv::VideoCapture cap; cap.open("/dev/video0");没有任何问题，使用pnp解算得到的角度和距离都是正确的，画面也是小画面。后面加了一些功能&…...

编程日记 2025/5/28 1:56:00

用Python做有趣的AI项目5：AI 画画机器人（图像风格迁移）

这个项目将使用 PyTorch 实现图像风格迁移（Neural Style Transfer），让一张图片看起来具有另一张图片的“艺术风格”。 🔧 开发环境建议 Python 3.8 PyTorch（pip install torch torchvision） PIL&#x…...

编程日记 2025/5/27 6:57:34

一种用于从视网膜图像中识别疾病的 BERT 式自监督学习 CNN

大家读完觉得有帮助记得关注和点赞！！！ 抽象在医学成像领域，深度学习的出现，尤其是卷积神经网络 （CNN） 的应用，彻底改变了医学影像的分析和解释。然而，深度学习方法通常依…...

编程日记 2025/5/28 2:02:24

OpenCV 图形API（68）图像与通道拼接函数------垂直拼接两个图像/矩阵的函数concatVert()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述对给定的矩阵执行垂直拼接。该函数将两个 GMat 矩阵（列数相同）垂直连接： GMat A { 1, 7,2, 8,3, 9 }; GMat…...

编程日记 2025/5/28 1:53:46

重测序关系矩阵构建方式汇总

样本间亲缘关系矩阵（kinship matrix）和同源性矩阵（IBS matrix）构建的方式 1. 可以使用plink的–make-rel计算个体之间的亲缘关系（强调个体之间的遗传相似性） /opt/software/plink --bfile vcf_bfile--mak…...

编程日记 2025/5/28 1:42:04

OpenCV 图形API（70）图像与通道拼接函数-----创建一个图像或矩阵（GMat）的副本的操作函数copy()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述制作输入图像的一个副本。请注意，这个副本可能不是实际存在的（没有实际复制数据）。使用此函数来维护图的契约…...

编程日记 2025/5/28 1:37:23

30天通过软考高项-第六天

30天通过软考高项-第六天任务：项目质量管理思维导图阅读知识点集锦阅读知识点记忆章节习题练习知识点练习手写回忆ITTO 听一遍喜马拉雅关于范围的内容质量管理 -背 1. 过程定义龟管控要求标准规划定，计划转化看过程&#xf…...

编程日记 2025/5/28 1:43:45

JUC中各种锁机制的应用和原理及死锁问题定位

JUC中各种锁机制的应用和原理及死锁问题定位在互联网大厂Java求职者的面试中，经常会被问到关于JUC（Java Util Concurrency）中的各种锁机制及其应用和原理的问题。本文通过一个故事场景来展示这些问题的实际解决方案。第一轮提问面试官&…...

编程日记 2025/5/27 5:56:09

区块链vs实体经济：一场金融、医疗、政务与物流的“效率革命”

区块链技术作为一种去中心化、不可篡改的分布式账本技术，正在重塑多个行业的运行模式。从金融交易的透明化到医疗数据的安全共享，从政务服务的效率提升到物流供应链的全程可追溯，区块链的跨行业应用展现出巨大的潜力与价值。以下是其在金融、…...

编程日记 2025/5/27 6:58:56

FTP-网络文件服务器

部署思路单纯上传下载ftp系统集成间的共享 samba网络存储服务器 NFS 网络文件服务器：通过网络共享文件或文件夹，实现数据共享 NAS （ network append storage):共享的是文件夹 FTP：文件服务器samba：不同系统间的文件…...

编程日记 2025/5/27 8:04:09

嵌入式RTOS实战：uC/OS-III最新版移植指南（附项目源码）

文章目录前言一、uC/OS简介二、工程移植2.1 下载ucos源码2.2 创建空白工程2.3 拷贝ucosiii源码文件2.3.1 UC-CONFIG2.3.2 UC-CPU2.3.3 UC-LIB2.3.4 UC-OS3 2.3 添加工程文件分组及路径2.4 代码首次编译2.5 源码修改2.5.1 cpu_cfg.h2.5.2 os_cpu_c.c2.5.3 lib_cfg.h2.5.4 sys.h…...

编程日记 2025/5/28 1:24:52

10.Excel：快速定位目标值

一批量删除 1.如何使用快捷键 CTRLG 补充：直接选择定位条件。 2.作用 1.批量删除工作表中的图片补充：无法通过框选的方式选中这些图片进行删除。这样只框选了表格，无法框选图片。因为图片在excel中被认为是一个对象，对象无法通…...

编程日记 2025/5/28 1:29:28

状态模式 (State Pattern)

状态模式（State Pattern）是一种行为型设计模式，它允许对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。该模式将状态封装成独立的类，并将请求委托给当前的状态对象，当对象的内部状态发生变化时，其行为也会随之改变。一、基础部分 1. 意图允许一个…...

编程日记 2025/5/28 1:54:39

【Java面试题04】MySQL 篇

文章目录一、前言🚀🚀🚀二、MySQL 篇：☀️☀️☀️1、MySQL 是如何实现事务的? 后序还在更新中~~~三、总结：🍓🍓🍓 一、前言🚀🚀🚀 ☀️ 你每一…...

编程日记 2025/5/28 1:42:04

同时安装多个版本的golang

https://golang.google.cn/dl/ go install golang.org/dl/go1.20latest 这样就会将 go1.20.exe 下载到 GOPATH/bin，但是此时并没有 go1.20 的源码包，也就不能正常执行 build/run 等指令。然后执行 go1.20 download下载源码包 > go1.20 download …...

编程日记 2025/5/27 12:32:51

【Web应用服务器_Tomcat】三、Tomcat 性能优化与监控诊断

在企业级 Java Web 应用的运行过程中，Apache Tomcat 作为广泛使用的 Servlet 容器和 Web 服务器，其性能表现直接影响用户体验和业务稳定性。本篇文章将深入探讨 Tomcat 性能优化的实用技巧，以及如何通过有效的监控诊断手段，及时发…...

编程日记 2025/5/28 1:35:30

stm32week13

stm32学习九.stm32与HAL库 4.时钟树 stm32f103所拥有的时钟源： 外部时钟的稳定性比内部的高，但是成本高，需要在外部额外接关于上述时钟树的简图： 右下四个是HAL库中的初始化函数 F4的时钟树简图： F7的时钟树简图…...

编程日记 2025/5/28 1:39:04

深入探究C++ 中的stack、queue和deque

目录一、stack（栈） 二、queue（队列） 三、deque（双向队列） 四、容器适配器总结在C 的标准模板库（STL）中，stack、queue和priority_queue是非常实用的容器适配器&…...

编程日记 2025/5/28 2:00:39

第十二节：性能优化高频题-shallowRef/shallowReactive使用场景

适用场景：大型对象/列表仅需第一层响应式变化（如JSON配置数据） Vue3 浅层响应式 API（shallowRef/shallowReactive）使用场景深度解析一、核心使用场景与性能优化原理大型 JSON 配置数据管理 • 场景特征：…...

编程日记 2025/5/28 1:26:14

openGauss DB4AI与scikit-learn模块对比探究

openGauss当前版本支持了原生DB4AI能力，引入原生AI算子，简化操作流程，充分利用数据库优化器、执行器的优化与执行能力，获得高性能的数据库内模型训练能力。本文介绍了笔者采用鸢尾花数据集，对openGauss DB4AI功能进行…...

编程日记 2025/5/28 1:23:20

基于大模型的公安预审办案笔录分析的挑战与应对策略-3

引言 ：在基于大模型的公安预审办案笔录分析应用过程中，虽然取得了一定的成果，但也面临着诸多挑战。本文将分析这些挑战，并提出相应的应对策略，以推动该技术在公安领域的更好地发展和应用。引文：https://c…...

编程日记 2025/5/28 2:41:16

ubantu18.04（Hadoop3.1.3）之Flink安装与编程实践（Flink1.9.1）

说明：本文图片较多，耐心等待加载。（建议用电脑） 注意所有打开的文件都要记得保存。第一步：准备工作本文是在之前Hadoop搭建完集群环境后继续进行的，因此需要读者完成我之前教程的所有操作。注意本次实…...

编程日记 2025/5/27 1:43:55

AI辅助编程-cursor开发煤矿持证上岗管理程序需求与设计篇

Cursor 是一款由人工智能驱动的智能代码编辑器，深度融合AI技术以提升开发效率。其核心功能基于GPT-4等先进模型，支持代码生成、错误修复、智能补全及自然语言编程。开发者可通过对话交互直接描述需求，AI即时生成对应代码片段，显…...

编程日记 2025/5/28 1:40:32

如何使用极狐GitLab 议题看板？

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网议题看板 (BASIC ALL) 议题看板是一个软件项目管理工具，用于计划、组织和可视化功能或产品发布的工作流程。它可…...

编程日记 2025/5/28 1:32:41

计网分层体系结构(包括OSI,IP,两者对比和相关概念)

1. 应用层： 用户与网络的界面，FTP，SMTP, HTTP 2. 表示层(Presentation Layer)： 解决用户信息的语法表示问题数据压缩，加密解密表示变换 3. 对话层(Session Layer)： 功能：允许不同主机的各个进…...

编程日记 2025/5/15 23:13:21

爬虫过程中如何确保数据准确性

在爬虫过程中，确保数据的准确性是非常重要的。数据不准确可能会导致分析结果的偏差，甚至影响决策。以下是一些确保爬虫数据准确性的方法和技巧： 一、验证数据来源确保数据来源的可靠性是确保数据准确性的第一步。选择信誉良好的网站作为数…...

编程日记 2025/5/27 4:46:12

Maven多模块工程版本管理：flatten-maven-plugin扁平化POM

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...

编程日记 2025/5/22 14:17:31

数据库基础与核心操作：从概念到实战的全面解析

目录 1 基本概念2 基本操作2.1 DCL2.2 DDL2.3 DML2.4 DQL(高级查询) 3 高级功能3.1 视图（无参函数）3.2 存储过程(有参函数)3.3 触发器 4 约束4.1 主键约束4.2 UNIQUE KEY（唯一键约束）4.3 FOREIGN KEY（外键约束&#xf…...

编程日记 2025/4/29 6:23:29

网络原理 - 10（HTTP/HTTPS - 1）

前面的网络原理 1 - 9，按照 TCP/IP 五层协议栈，介绍了各个层次的核心协议。应用层：自定义协议（xml，json....） 传输层：UDP/TCP 网络层：IP 数据链路层：以太网我们这…...

编程日记 2025/5/23 23:34:07

UDP协议详解+代码演示

1、UDP协议基础 1. UDP是什么？ UDP（User Datagram Protocol，用户数据报协议）是传输层的核心协议之一，与TCP并列。它的主要特点是： 无连接：通信前不需要建立连接（知道对端的…...

编程日记 2025/5/8 5:10:19

QT事件Trick

拖动 void DWidget::mousePressEvent(QMouseEvent *event) {if(event->button()Qt::LeftButton){QListWidgetItem *selItem currentItem();if(selItem! nullptr){m_startPosevent->pos(); //记录鼠标按下时的起始位置}}QListWidget::mousePressEvent(event); }void DW…...

编程日记 2025/4/29 6:23:26

解答UnityShader学习过程中的一些疑惑（持续更新中）

一、坐标系相关 shader中会有几种空间： 模型空间：以物体自己为中心原点世界空间：就是unity的世界坐标观察空间（视图空间）：以相机为中心的坐标系裁剪空间：是一个4d空间，有x,y,z,w…...

编程日记 2025/5/3 8:56:12

【图论拓扑排序 bfs】P6037 Ryoku 的探索|普及+

本文涉及知识点 C图论 CBFS算法 P6037 Ryoku 的探索题目背景 Ryoku 对自己所处的世界充满了好奇，她希望能够在她「死」之前尽可能能多地探索世界。这一天，Ryoku 得到了一张这个世界的地图，她十分高兴。然而，Ryoku 并不知道…...

编程日记 2025/5/21 11:38:14

Spring Boot定时任务

在 Spring Boot 中实现定时任务主要依赖于Scheduled注解和 Spring 调度器。基本概念定时任务，简单来说就是在特定的时间点或按照一定的时间间隔自动执行的任务。在 Spring Boot 中，实现定时任务主要依赖于 Spring 框架提供的 Scheduled 注解和 TaskSc…...

编程日记 2025/4/29 6:22:22

目录