深入理解 JavaScript 事件循环机制:单线程中的异步处理核心

深入理解 JavaScript 事件循环机制:单线程中的异步处理核心

JavaScript 是一门单线程的编程语言,也就是说它在同一时间只能执行一个任务。然而,现代 Web 应用经常需要处理大量的异步操作,如用户输入、网络请求、定时器等。为了确保在这些操作期间应用的流畅运行,JavaScript 引入了事件循环机制(Event Loop),它使得单线程也能高效地处理异步任务。

本文将深入分析 JavaScript 的事件循环机制及其核心组件,帮助你更好地理解和使用这一强大的异步处理工具。

事件循环机制的核心组件

1. 执行栈(Call Stack)

执行栈是一个 LIFO(后进先出)结构,用来管理所有的同步任务。当函数被调用时,它会被推入执行栈顶,函数执行完毕后才会从栈中弹出。JavaScript 在单线程中执行代码的顺序是严格按照执行栈来完成的。

关键点:由于 JavaScript 是单线程的,执行栈中的同步任务会阻塞其他任务的执行。因此,当执行栈上有耗时的任务时,会导致 UI 渲染、用户输入等操作的延迟。为了解决这个问题,JavaScript 借助事件循环机制来处理异步任务。

2. 消息队列(Message Queue)

消息队列是一个 FIFO(先进先出)结构,用于存放待处理的异步任务。这些任务通常包括宏任务(Macro Task),例如 setTimeoutsetInterval、网络请求的回调等。

任务调度:当执行栈中的所有同步代码执行完毕后,事件循环会从消息队列中取出任务,按顺序将它们放入执行栈中执行。消息队列的存在保证了异步任务不会阻塞同步任务。

3. 微任务队列(Microtask Queue)

微任务队列存储优先级比宏任务更高的 轻量级异步任务 ,通常用于处理一些短小、紧急的任务。微任务队列中的任务包括 Promise 的回调、MutationObserverprocess.nextTick(Node.js)。

优先级:每个宏任务执行完毕后,事件循环会立即处理微任务队列中的所有任务。在处理完微任务队列中的任务之前,事件循环不会继续执行下一个宏任务。

4. Web APIs 和 Node.js APIs

虽然 JavaScript 是单线程的,但浏览器和 Node.js 提供的底层 Web APIs 或 Node.js 系统 APIs(如定时器、网络请求等)可以借助多线程机制处理异步任务。当这些任务完成时,它们的回调函数会被推入消息队列等待执行。

事件循环的执行流程

JavaScript 的事件循环遵循一个简单但高效的流程:

  1. 执行同步代码:事件循环首先会执行执行栈中的同步任务。同步任务依次入栈、执行、出栈,直到栈为空。

  2. 处理微任务:执行栈清空后,事件循环会优先处理微任务队列中的任务。如果微任务在执行过程中产生了新的微任务,这些任务也会立即被执行,直到微任务队列为空。

  3. 处理宏任务:当微任务队列清空后,事件循环会从消息队列中取出 一个宏任务 ,将其放入执行栈中执行。宏任务执行完毕后,事件循环再次处理微任务队列。

  4. 重复循环:事件循环会不断重复上述步骤,保证异步任务与同步任务的协调执行。

宏任务与微任务

宏任务(Macro Task)

宏任务是相对较大的异步任务,每个事件循环中只能执行一个宏任务。常见的宏任务包括:

  • setTimeoutsetInterval:用于设置定时器,回调函数会在指定时间后被推入消息队列。
  • I/O 操作:如文件读取、网络请求等任务的回调。
  • 事件处理器:例如 clickkeydown 等事件的回调函数。
  • UI 渲染任务:浏览器中的重排(Reflow)和重绘(Repaint)。
  • setImmediate(Node.js 环境中): 当前事件循环结束后立即执行的回调。
  • requestAnimationFrame:用于在浏览器中下一帧渲染之前执行的回调。

微任务(Microtask)

微任务优先级高于宏任务,在每次宏任务执行结束后会优先处理。常见的微任务包括:

  • Promise.then, catch, finally:Promise 的回调总是在当前事件循环的微任务队列中调度执行。
  • MutationObserver:DOM 发生变化时的回调。
  • process.nextTick(Node.js):一种特殊的微任务,优先级甚至高于 Promise
  • queueMicrotask:显式将回调函数加入微任务队列。

宏任务与微任务的执行顺序示例

通过以下代码示例,我们可以理解宏任务与微任务的执行顺序:

console.log('Start');setTimeout(() => {console.log('Timeout 1');
}, 0);Promise.resolve().then(() => {console.log('Promise 1');
}).then(() => {console.log('Promise 2');
});console.log('End');

执行过程

  1. console.log('Start')console.log('End') 是同步任务,立即执行。
  2. setTimeout 的回调函数被推入消息队列,等待宏任务调度。
  3. Promise.resolve() 生成的 .then() 回调函数被推入微任务队列。
  4. 同步任务执行完毕后,事件循环会先处理微任务队列,依次输出 Promise 1Promise 2
  5. 最后,事件循环会从消息队列中取出 setTimeout 的回调,输出 Timeout 1

最终输出顺序为:

Start
End
Promise 1
Promise 2
Timeout 1

在这里插入图片描述

宏任务与微任务的列表总结

宏任务:

  • setTimeout
  • setInterval
  • setImmediate(Node.js)
  • requestAnimationFrame
  • I/O 操作
  • 事件处理器(如 clickkeydown 等)
  • postMessage
  • MessageChannel
  • UI 渲染任务(如重排和重绘)

微任务:

  • Promise.then, catch, finally
  • MutationObserver
  • process.nextTick(Node.js)
  • queueMicrotask
  • Async/Await

实际应用场景

1. 异步操作的处理

事件循环机制在处理异步操作时显得尤为重要。无论是网络请求、用户交互,还是定时器的执行,它们的回调函数都不会立即执行,而是通过事件循环的调度机制有序执行。这使得主线程不会因等待异步任务的完成而阻塞。

2. 性能优化

开发者可以利用微任务的优先级特性来优化代码的执行顺序。通过 PromisequeueMicrotask,可以将需要优先处理的任务放入微任务队列,确保它们在当前事件循环中尽快执行。

3. 避免阻塞主线程

事件循环机制通过将耗时任务交由 Web APIs 或 Node.js APIs 处理,避免了同步任务阻塞主线程。这在处理大量用户交互或后台数据处理时至关重要。

总结

JavaScript 的事件循环机制使得单线程环境下也能高效处理异步任务。通过执行栈、消息队列、微任务队列的协调工作,JavaScript 在不阻塞主线程的情况下完成各种异步操作。理解事件循环的工作原理,有助于开发者编写出更加高效、响应迅速的 Web 应用。

掌握宏任务和微任务的优先级以及事件循环的调度逻辑,是优化异步操作和改善用户体验的关键。

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

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

相关文章

[CSP-J 2021] 插入排序

[CSP-J 2021] 插入排序 题目描述 插入排序是一种非常常见且简单的排序算法。小 Z 是一名大一的新生,今天 H 老师刚刚在上课的时候讲了插入排序算法。 假设比较两个元素的时间为 O ( 1 ) \mathcal O(1) O(1),则插入排序可以以 O ( n 2 ) \mathcal O(…

《迁移学习》—— 将 ResNet18 模型迁移到食物分类项目中

文章目录 一、迁移学习的简单介绍1.迁移学习是什么?2.迁移学习的步骤 二、数据集介绍三、代码实现1. 步骤2.所用到方法介绍的文章链接3. 完整代码 一、迁移学习的简单介绍 1.迁移学习是什么? 迁移学习是指利用已经训练好的模型,在新的任务上…

鸿蒙开发(NEXT/API 12)【状态查询与订阅】手机侧应用开发

注意 该接口的调用需要在开发者联盟申请设备基础信息权限与穿戴用户状态权限,穿戴用户状态权限还需获得用户授权。 实时查询穿戴设备可用空间、电量状态。订阅穿戴设备连接状态、低电量告警、用户心率告警。查询和订阅穿戴设备充电状态、佩戴状态、设备模式。 使…

初识Django

前言: 各位观众老爷们好,最近几个月都没怎么更新,主要是最近的事情太多了,我也在继续学习Django框架,之前还参加了一些比赛,现在我会开始持续更新Django的学习,这个过程会比较久,我会把我学习的…

MySQL--三大范式(超详解)

目录 一、前言二、三大范式2.1概念2.2第一范式(1NF)2.3第二范式(2NF)2.3第三范式(3NF) 一、前言 欢迎大家来到权权的博客~欢迎大家对我的博客进行指导,有什么不对的地方,我会及时改进…

嘴尚绝卤味:健康美味的双重奏

在当今快节奏的生活中,人们对美食的追求不再仅仅停留于味蕾的满足,更加注重食物的健康与营养。在这一背景下,"嘴尚绝卤味"以其独特的健康理念与精湛的制作工艺,成为了市场上备受瞩目的卤味品牌。本文将从"嘴尚绝卤…

Django学习笔记九:RESTAPI添加用户认证和授权

在Django REST Framework中添加用户认证和授权,通常涉及以下几个步骤: 1. 认证(Authentication) 认证是指确定用户身份的过程。Django REST Framework提供了多种认证方式: Token Authentication:通过一个…

Kotlin基本知识

Kotlin是一种现代的静态类型编程语言,由JetBrains公司在2010年推出,并被Google在2019年宣布为Android开发的首选语言。 超过 50% 的专业 Android 开发者使用 Kotlin 作为主要语言,而只有 30% 使用 Java 作为主要语言。 70% 以 Kotlin 为主要语…

APK安装包arm64-v8a、armeabi-v7a、x86、x86_64如何区别?(2024年10月1日)

其实就是安卓CPU的进步史 安卓CPU类型: arm64-v8a: 第8代、64位ARM处理器,目前手机大多数是此架构(新手机,可以无脑选择)armeabiv-v7a: 第七代及以上的 ARM 处理器。2011年5月以后生产的大部分安卓设备都使用它armeabi: 第5代、第6代的ARM处理器&#…

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《考虑光伏不确定性的配电网谐波监测优化配置方法 》

本专栏栏目提供文章与程序复现思路,具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

华为云技术深度解析:以系统性创新加速智能化升级

华为云技术深度解析:以系统性创新加速智能化升级 在当今数字化转型的浪潮中,云计算作为关键的基础设施,正以前所未有的速度推动着各行各业的智能化升级。作为全球领先的云服务提供商,华为云凭借其深厚的技术积累和创新实力&#…

Azure DevOps Server:不能指派新增的用户

Contents 1. 概述2. 解决方案 1. 概述 近期和微软Azure DevOps项目组解决了一个“无法指派开发人员”的问题,在此分享给大家。问题描述: 在一个数据量比较大的Azure DevOps Server的部署环境中,用户发现将新用户的AD域账户添加到Azure DevOps…

《15分钟轻松学 Python》教程目录

为什么要写这个教程呢,主要是因为即使是AI技术突起的时代,想要用好AI做开发,那肯定离不开Python,就算最轻量级的智能体都有代码块要写,所以不一定要掌握完完整整的Python,只要掌握基础就能应对大部分场景。…

数据看板如何提升决策效率?

数据看板作为一种直观、高效的数据可视化工具,在这一过程中发挥着至关重要的作用。以一家中型制造企业为例,每天面临着生产计划的安排、原材料的采购、产品质量的把控以及市场销售的策略制定等诸多业务场景。在生产线上,需要确保设备的高效运…

《计算机原理与系统结构》学习系列

系列文章目录 一、计算机概要与技术 二、指令:计算机的语言(上) 三、指令:计算机的语言(中) 四、指令:计算机的语言(下) 五、计算机的算数运算(上&#…

【隐私计算篇】多方安全计算之函数秘密共享(FSS)

1. 函数秘密共享(FSS)定义 秘密共享是一种将一个值拆分为多个份额的方法,形式有多种,可以参考《安全多方计算(MPC)矩阵乘法算子的原理分析》。这里主要提及加法秘密共享,使得:这些份额可以重新组合以还原出秘密值;任…

【HTML并不简单】笔记1-常用rel总结:nofollow、noopener、opener、noreferrer,relList

文章目录 rel"nofollow"rel"noopener"与rel"opener"rel"noreferrer"relList对象 《HTML并不简单:Web前端开发精进秘籍》张鑫旭,一些摘要: HTML,这门语言的知识体系非常庞杂,涉…

Python数据结构与算法问题详解

Python数据结构与算法问题详解 Python 作为一种高级编程语言,凭借其简洁的语法和强大的内置库,成为了数据结构与算法学习的绝佳工具。本文将深入解析几种常见的数据结构,并结合具体的算法,展示如何在实际问题中高效解决问题。通过…

《PMI-PBA认证与商业分析实战精析》第7章 解决方案评价

第7章 解决方案评价 本章主要内容: 评价的建议思维 解决方案的评价计划 确定评价什么 何时以及如何验证解决方案的结果 评价验收标准和解决缺陷 促进通过/不通过的决策 获得解决方案的签字确认 评价解决方案的长期绩效 解决方案替换/淘汰 本章涵盖的考试…

36 指针与 const 的多种搭配:指向常量的指针、常量指针、指向常量的常量指针、指针到指针的常量(涉及双重指针)

目录 1 指向常量的指针 1.1 概念 1.2 语法格式 1.3 声明与初始化 1.4 实际应用 1.4.1 保护数据 1.4.2 函数参数 1.4.3 字符串常量 2 常量指针 2.1 概念 2.2 语法格式 2.3 声明与初始化 2.4 实际应用 2.4.1 保护指针指向的地址 2.4.2 数组处理 2.4.3 函数参数 …