JS事件循环:微任务和宏任务

浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于 事件循环 的。 理解事件循环的工作方式对于代码优化很重要,有时对于正确的架构也很重要。

事件循环是什么?

我们知道虽然 JavaScript 是一门单线程语言,但通过使用 Promise 等机制,可以实现异步编程,单线程与异步编程听起来是矛盾的,哪JS是如何实现异步编程呢,答案就是事件循环事件循环 的概念非常简单, 件循环是 JavaScript 引擎用来处理异步任务的机制,在事件循环中,JavaScript 引擎会不断地从任务队列中取出任务,执行这些任务,并等待新的任务加入。 整体流程如下:

  1. 当同步代码时,引擎会顺序执行。
  2. 当碰到异步的代码时,引擎会将这个任务挂起,放入一个事件队列
  3. 当同步代码执行完成后,主线程处于闲置状态时,主线程会去查找事件队列是否有任务,然后取出第一个任务,执行。
  4. 如此反复,形成事件循环

常见的异步任务包括定时器、网络请求、事件监听器回调等。

从代码来看,js事件循环是采用类似下边这种方式来实现的:

javascript 复制代码
while (queue.waitForMessage()) {
  queue.processNextMessage();
}

关于宏任务、微任务

以上的事件循环过程是一个宏观的表述,实际上因为异步任务之间并不相同,因此他们的执行优先级也有区别。不同的异步任务被分为两类:微任务 (micro task)和宏任务 (macro task),在同一次事件循环中,微任务永远在宏任务之前执行。 以下事件属于宏任务:

  • setInterval()
  • setTimeout()

以下事件属于微任务

  • new Promise()
  • new MutaionObserver()

浏览器中有哪几种进程?

虽然js是单线程的,但js的执行环境浏览器并不是单线程的,浏览器中存在多个进程,每个进程负责不同的任务:

  • 主进程:管理浏览器的主要功能,如地址栏、书签、前进后退等。
  • 渲染进程:执行 JavaScript 代码、渲染页面、管理 DOM 元素等。
  • GPU 进程:处理页面的 GPU 相关操作,如绘制页面、动画效果等。
  • 网络进程:处理网络请求和数据传输。

其中渲染进程是执行js代码和渲染dom元素的进程,在渲染进程中,JavaScript 代码执行会影响页面渲染和用户交互。如果一个 JavaScript 任务执行时间过长,可能会阻塞其他任务的执行,导致页面卡顿,例如无法及时响应用户事件,例如处理用户事件。所以一些框架如React Fiber 架构采用将大任务拆分为小任务,并利用时间片的方式在渲染进程中交替执行这些任务,从而提高页面的响应性和用户体验。"

参考:

  1. 现代JavaScript教程-事件循环:微任务和宏任务
  2. 详解JavaScript中的Event Loop(事件循环)机制
相关推荐
Setsuna_F_Seiei3 小时前
前端转型 Agent 开发 04 之 MCP 与 Skill(赋予 Agent 更广工作能力)
前端·agent
刘发财4 小时前
前端2秒生成500页矢量PDF,rust真的强到没朋友
前端·javascript·rust
郑州光合科技余经理5 小时前
国际版外卖系统:税率字段怎么和订单主流程解耦
android·java·开发语言·前端·后端·php·ai编程
梦想平凡5 小时前
百游棋牌源代码开发搭建教程(十):隔离部署、备份恢复与双端验收
java·前端·javascript·数据库·源代码管理
yume_sibai6 小时前
06-Rust Web 开发实战(Axum 框架 + 数据库 + JWT 认证 + 中间件 + 部署)
前端·数据库·rust
计算机魔术师8 小时前
特朗普上台打给黄仁勋:AI末日论是骗局,我们绝不让它发生
前端
troy1288 小时前
Python 基础语法(八):Web 后端开发、数据分析与可视化、网络爬虫、人工智能 / 大模型应用
前端·python·数据分析
计算机魔术师8 小时前
CEO说要慢下来,黑客说别做梦了——同一篇论文,两种命运
前端
kyriewen9 小时前
我花3天抓了一个幽灵bug,凶手藏在第4层
前端·javascript·程序员
IT_陈寒9 小时前
Java里用Stream.parallel()翻车实录,这性能还不如单线程
前端·人工智能·后端