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(事件循环)机制
相关推荐
小二·11 分钟前
Python Web 开发进阶实战 :AI 原生数字孪生 —— 在 Flask + Three.js 中构建物理世界实时仿真与优化平台
前端·人工智能·python
Amumu121381 小时前
Vue组件化编程
前端·javascript·vue.js
We་ct1 小时前
LeetCode 6. Z 字形变换:两种解法深度解析与优化
前端·算法·leetcode·typescript
小二·2 小时前
Python Web 开发进阶实战(终章):从单体应用到 AI 原生生态 —— 45 篇技术演进全景与未来开发者生存指南
前端·人工智能·python
m0_637256583 小时前
vue-baidu-map添加了类型组件导致非常卡顿的问题
前端·javascript·vue.js
挂机且五杀3 小时前
为什么在React地图组件里,memo 不是优化,而是生存?
前端·react.js·前端框架
RFCEO3 小时前
HTML编程 课程七、:HTML5 新增表单标签与属性
前端·html·html5·搜索框·手机号·邮箱验证·日期选择
刘一说3 小时前
Vue开发中的“v-model陷阱”:为什么它不能用于非表单元素?
前端·javascript·vue.js
利刃大大3 小时前
【Vue】组件生命周期 && 组件生命周期钩子
前端·javascript·vue.js·前端框架
建群新人小猿5 小时前
陀螺匠企业助手—个人简历
android·大数据·开发语言·前端·数据库