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(事件循环)机制
相关推荐
ikoala3 小时前
Codex 小白入门:从安装到插件、MCP、Skills,一篇把配置讲明白
前端·javascript·后端
雪隐4 小时前
用Flutter做背单词APP-04一个人,2周,从零撸出一个背单词App
前端·人工智能·后端
OpenTiny社区4 小时前
Skill 设计:封装、评测、运营,一次讲透
前端·github
大白要努力!4 小时前
uni-app 全面入门速查手册
前端·uni-app
索西引擎4 小时前
【React】虚拟 DOM:原理、机制与核心价值分析
前端·react.js·前端框架
console.log('npc')4 小时前
网页移动端UI/UX Pro Max - 设计智能skill
前端·人工智能·ui·ux
javajenius4 小时前
Masslynx 4.1安装包免费下载及详细安装教程
java·服务器·前端·其他
gis开发之家5 小时前
《Vue3 从入门到大神29篇》单元测试与 E2E 测试 —— 保障 Vue3 项目的质量
前端·javascript·vue.js·单元测试·前端框架·vue3
爱勇宝5 小时前
AI 时代,更稀缺的是「提出好问题」还是「判断好答案」?
前端·人工智能·后端
李伟_Li慢慢5 小时前
three.js 中的WebGPU 有几成熟了?
前端·three.js