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(事件循环)机制
相关推荐
墨渊君14 分钟前
React Native 跨平台组件库实践: GlueStack UI 上手指南
前端
晓得迷路了22 分钟前
栗子前端技术周刊第 84 期 - Vite v7.0 beta、Vitest 3.2、Astro 5.9...
前端·javascript·vite
独立开阀者_FwtCoder25 分钟前
最全301/302重定向指南:从SEO到实战,一篇就够了
前端·javascript·vue.js
Moment34 分钟前
给大家推荐一个超好用的 Marsview 低代码平台 🤩🤩🤩
前端·javascript·github
小满zs38 分钟前
Zustand 第三章(状态简化)
前端·react.js
普宁彭于晏39 分钟前
元素水平垂直居中的方法
前端·css·笔记·css3
恋猫de小郭1 小时前
为什么跨平台框架可以适配鸿蒙,它们的技术原理是什么?
android·前端·flutter
云浪1 小时前
元素变形记:CSS 缩放函数全指南
前端·css
明似水1 小时前
用 Melos 解决 Flutter Monorepo 的依赖冲突:一个真实案例
前端·javascript·flutter
独立开阀者_FwtCoder1 小时前
stagewise:让AI与代码编辑器无缝连接
前端·javascript·github