JavaScript中的事件循环(Event Loop)

1. 概述

javaScript是单线程的,意味着它一次只能执行一个任务。然而,许多操作,如网络请求、定时器等,都会导致延迟,如果程序在等待这些操作完成时,可能会操作一个阻塞的效果,影响用户体验。这个时候就需要事件循环 来进行一个调节:通过合理的安排任务的执行顺序,使得异步任务能够以非阻塞的方式运行。在搞清楚事件循环之前,需要明白javaScript中的任务、任务队列等概念

2. javaScript中的任务

javaScript程序里面的任务可以分为两类

  • 同步任务 :没有被引擎挂起、在主线程上排队执行的任务。同步任务是按照代码的书写顺序依次执行的,只有前一个任务执行完毕,才能执行下一个任务,因此会阻塞 后续的任务执行。在事件循环中,同步任务的执行会一致持续,直到所有的同步任务执行完毕
  • 异步任务 :被引擎挂起、放在一边,不进入主线程,而进入任务队列 的任务。异步任务是在将来的某个时间点执行的任务,不会阻塞后续任务的执行,异步任务通常会在一段时间后完成,并在完成时触发回调函数处理结果。 异步任务又可以分为两个子类,宏任务、微任务
    • 宏任务 :代表一个独立的、完整的执行单元,在任务队列中排队等待执行。典型的宏任务包括,整体的javaScript代码、setTimeOutsetTimeIntervalAjax
    • 微任务 :微任务是一个更小的任务单位,它的执行优先级高于宏任务。当一个宏任务执行完毕后,在执行下一个宏任务之前,会立即处理微任务队列中的所有微任务。典型的微任务包括,promisedefinePropertyProxy

3. 任务队列和事件循环

javaScript运行时,除了一个正在运行的主线程,引擎还提供了一个任务队列(task queue),里面是各种需要当前程序处理的异步任务。实际上根据异步任务的类型,存在多个任务队列,如之前所说的,宏任务队列,微任务队列。

  • 任务队列:是一种数据结构,用于存储不同类型的任务,如宏任务和微任务。任务会别添加到任务队列,等待事件循环将其取出并执行
    • 宏任务队列:存储宏任务,每次事件循环迭代中只执行一个宏任务
    • 微任务队列:存储微任务,这些微任务在宏任务执行完毕之后立即执行

引擎在执行所编写的代码顺序是:

  1. 主线程会去执行所有的同步任务。等到同步任务执行完毕之后,就会检查任务队列里面的异步任务
  2. 这里首先会从宏任务队列里面选择一个宏任务执行,执行完毕之后,则检查微任务队列并以此执行里面所有的微任务
  3. 当微任务队列中的任务执行完毕之后,重复步骤2,直到宏任务队列为空

在每次事件循环迭代中,同步任务的执行都是第一步,只有当所有 的同步任务执行完毕之后,事件循环机制才会去检查任务队列 ,并从宏任务队列 中选择一个宏任务执行,在执行宏任务的过程中如果产生了微任务,会将这些微任务添加到微任务队列,并等当前的宏任务执行完毕之后立即执行微任务队列里面的微任务。等微任务队列中的微任务执行完毕之后,则会选着宏任务队列中的下一个宏任务执行,依次循环

事件循环 :上诉执行顺序中的2->3->2->3...就可以称为事件循环(Event Loop), 事件循环是 JavaScript 异步编程的基础机制,通过合理地管理任务队列、宏任务和微任务,使得异步操作能够在单线程环境中得到有效的协调和执行,从而提高了程序的响应性和用户体验。

相关推荐
智算菩萨16 分钟前
实战:高级中文自然语言处理系统的Python设计与实现
前端·javascript·easyui
幼儿园老大1 小时前
告别代码屎山!UniApp + Vue3 自动化规范:ESLint 9+ 扁平化配置全指南
javascript·vue.js
Liu.7741 小时前
vue3组件之间传输数据
前端·javascript·vue.js
|晴 天|1 小时前
前端闭包:从概念到实战,解锁JavaScript高级技能
开发语言·前端·javascript
全栈前端老曹2 小时前
【ReactNative】核心组件与 JSX 语法
前端·javascript·react native·react.js·跨平台·jsx·移动端开发
小小黑0072 小时前
快手小程序-实现插屏广告的功能
前端·javascript·小程序
@万里挑一2 小时前
vue中使用虚拟列表,封装虚拟列表
前端·javascript·vue.js
黑臂麒麟3 小时前
Electron for OpenHarmony 跨平台实战开发:Electron 文件系统操作实战
前端·javascript·electron·openharmony
1024肥宅3 小时前
工程化工具类:模块化系统全解析与实践
前端·javascript·面试
weixin_422555423 小时前
ezuikit-js官网使用示例
前端·javascript·vue·ezuikit-js