首页 > 编程语言 >什么是javascript的事件循环

什么是javascript的事件循环

时间:2024-09-30 18:53:21浏览次数:7  
标签:异步 JavaScript javascript 任务 循环 事件 执行

JavaScript 的 事件循环(Event Loop) 是其执行机制的核心,用来处理异步操作,使得 JavaScript 能够实现非阻塞式的单线程异步编程。为了理解事件循环,首先要了解 JavaScript 是单线程的语言,这意味着它一次只能执行一个任务。但在实际应用中,比如 I/O 操作(网络请求、定时器、用户事件等),JavaScript 使用事件循环机制来管理异步任务,使其在需要的时候能继续执行而不阻塞主线程。

1. JavaScript 执行模型概览

JavaScript 的执行环境中包括以下几个关键概念:

  • 调用栈(Call Stack):调用栈是 JavaScript 用来管理函数执行的地方。当一个函数被调用时,它会被压入调用栈,执行完成后弹出。

  • 任务队列(Task Queue):也叫 消息队列(Message Queue),存放异步任务的回调函数,如 setTimeoutPromise、事件处理函数等。

  • 事件循环(Event Loop):事件循环是负责检查调用栈是否为空,并决定何时将任务队列中的任务推入调用栈执行的机制。

2. 事件循环的运行机制

事件循环的核心工作流程如下:

  1. 同步任务:所有同步任务都会直接在 调用栈(Call Stack) 上依次执行。

  2. 异步任务:当遇到异步任务(如 setTimeoutPromise、I/O 操作)时,这些任务会被放到相应的 任务队列 中,而不会立即执行。

  3. 事件循环(Event Loop):事件循环会不断检查调用栈是否为空。当调用栈为空时,它会查看 任务队列 是否有可执行的任务。如果有,它会将任务队列中的第一个任务放入调用栈中执行。

  4. 继续执行:当某个异步任务的回调函数被执行完,事件循环会再次检查任务队列,重复上述过程。

3. 宏任务和微任务

JavaScript 中的异步任务大致可以分为 宏任务(Macro-task)微任务(Micro-task),这两者的执行顺序是事件循环中至关重要的部分。

  • 宏任务(Macro-task)包括:setTimeoutsetIntervalI/O 操作、script(整体代码)、事件监听器等。

  • 微任务(Micro-task)包括:Promise.then()process.nextTick(Node.js)、MutationObserver

执行顺序:
  1. 事件循环每次循环称为一个 tick,每次 tick 开始时,会先执行 调用栈中的所有同步任务

  2. 当调用栈为空后,会执行 微任务队列(Micro-task Queue) 中的所有任务,直到微任务队列清空。

  3. 在微任务执行完毕之后,事件循环才会去执行下一个 宏任务队列 中的任务。

  4. 重复以上步骤。

示例:
console.log('Start'); // 同步任务

setTimeout(() => {
  console.log('Macro-task: setTimeout'); // 宏任务
}, 0);

Promise.resolve().then(() => {
  console.log('Micro-task: Promise'); // 微任务
});

console.log('End'); // 同步任务

执行顺序

  1. console.log('Start')console.log('End') 是同步任务,直接进入调用栈依次执行。
  2. setTimeout 是宏任务,它的回调函数会被放入宏任务队列中,稍后执行。
  3. Promise.then 是微任务,微任务会在同步任务结束后立即执行。
  4. 最后,setTimeout 的回调才会执行。

输出结果

Start
End
Micro-task: Promise
Macro-task: setTimeout

4. 典型的异步操作

  • setTimeoutsetInterval:它们是常见的定时器函数,回调函数会被放入宏任务队列中,等待事件循环调度。

  • PromisePromise 是微任务,它的 thencatch 回调会被放入微任务队列中,优先于宏任务执行。

  • requestAnimationFrame:这个函数专门用于高效的动画渲染,在浏览器的帧刷新之前执行其回调。

  • I/O 操作:如网络请求的回调会在 I/O 事件完成后放入宏任务队列中。

5. 事件循环在浏览器和 Node.js 中的区别

  • 浏览器 中,事件循环的机制更侧重于处理用户事件和 UI 渲染。每次事件循环中的宏任务执行完之后,浏览器会重新渲染页面,然后再执行下一个任务。

  • Node.js 的事件循环更复杂一些,尤其在处理 I/O 和定时器方面有更详细的阶段划分。Node.js 的事件循环大致分为几个阶段:timers 阶段(执行定时器回调)、I/O callbacks 阶段、idle, prepare 阶段、poll 阶段(处理 I/O 事件)、check 阶段(执行 setImmediate)、close 阶段(关闭回调)。

6. 事件循环的应用场景

  • 异步编程:事件循环机制使得 JavaScript 能够在单线程中高效处理 I/O 操作、定时器、DOM 操作等任务,不会阻塞主线程。

  • 优化性能:在用户界面更新时,长时间的同步任务可能导致页面卡顿,理解事件循环可以帮助你将耗时的任务异步处理,从而保持页面的流畅度。

  • 微任务与宏任务优化:通过合理使用微任务和宏任务,你可以控制任务的优先级,从而优化程序的执行顺序。

总结:

  • 事件循环 是 JavaScript 中实现异步编程的核心机制,它不断检查调用栈和任务队列,确保异步任务在适当的时间点执行。
  • 异步任务分为 宏任务微任务,微任务的优先级高于宏任务。
  • 事件循环的机制使得 JavaScript 能够处理大量 I/O、定时器、DOM 操作等任务而不阻塞主线程执行。

理解事件循环对于编写高效、流畅的 JavaScript 代码至关重要。

标签:异步,JavaScript,javascript,任务,循环,事件,执行
From: https://blog.csdn.net/misstianyun/article/details/142654238

相关文章

  • Vue window定义的事件调用Vue脚手架对象的方法
    Vuewindow定义的事件调用Vue脚手架对象的方法基本概念与作用window事件Vue生命周期作用示例一:基本的window事件监听示例二:使用Vue生命周期钩子管理事件示例三:使用CompositionAPI处理window事件示例四:在Vuex中处理全局事件使用技巧与分析在Vue.js开发过程中,有时我......
  • Vue 事件委托学习
    Vue事件委托学习基本概念与作用什么是事件委托?为什么使用事件委托?示例一:基本的事件委托实现示例二:使用`.self`修饰符示例三:动态绑定事件示例四:使用Vue事件总线使用技巧与分析在前端开发中,处理用户交互是一项重要任务。随着应用复杂度的增加,页面上元素的数量也会随......
  • 共享文件访问日志记录方法;要记录谁访问了您的共享文件,您可以使用系统自带的审计功能或
    共享文件访问日志记录方法要记录谁访问了您的共享文件,您可以使用系统自带的审计功能或第三方软件。下面是具体的方法:1.开启系统自带的审计功能右击文件夹:找到您想要审计的共享文件夹,右击选择“属性”。访问安全设置:选择“安全”选项卡,然后点击“高级”。审计设......
  • 百度换肤javascript
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=d......
  • 【JavaScript】搭建一个具有记忆的简洁个人待办网页
    1.HTML结构文档类型声明:<!DOCTYPEhtml>这告诉浏览器这是一个HTML5文档。HTML标签:<htmllang="zh-CN">表示整个页面的内容,lang="zh-CN"表示内容使用简体中文。头部信息:<head><!--...--></head>包含页面的元数据,如字符集、视图窗口设置、标题和样式。样......
  • JavaScript 解构赋值 是 浅拷贝还是深拷贝
    解构赋值是ES6(ECMAScript2015)引入的一个特性,它允许我们可以快速取出数组或者对象中的值并赋值给新的变量。consta={name:'name',age:18,marriage:false,}let{name,age,marriage}=a;console.log(name,age,marriage)//打印信息:name......
  • 从 ES5 到 ES14:深入解析 JavaScript 的演进与特性
    文章目录前言一、ES5(ECMAScript2009)1.严格模式('usestrict')2.Object.defineProperty3.Array.isArray4.forEach,map,filter,reduce二、ES6(ECMAScript2015)1.let和const2.箭头函数3.模板字符串4.解构赋值5.class和extends6.模块(import和export)......
  • PostgreSQL是否有等待事件
    PostgreSQL是否有等待事件PostgreSQL提供了等待事件(WaitEvents)的机制,用于监控数据库运行过程中因资源争用而导致的等待情况。这些等待事件可以帮助数据库管理员识别导致性能问题的瓶颈,例如锁冲突、I/O等待等。什么是等待事件?等待事件是指PostgreSQL中的进程在等待某......
  • JavaScript
    什么是JavaScript?JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言(脚本语言是不需要编译,直接通过浏览器的解释就可以运行)。是用来控制网页行为的,它能使网页可交互。JavaScript和Java是完全不同的语言,不论是概念还是设计。但是基础语法类似。JavaScript在1......
  • 视野修炼-技术周刊第103期 | 优雅的移除事件
    欢迎来到第103期的【视野修炼-技术周刊】,下面是本期的精选内容简介......