请你谈谈:从宏任务微任务的角度谈谈js代码的执行顺序

devtools/2024/10/22 8:56:55/

JavaScript(JS)在浏览器环境中确实是单线程的,这主要出于以下几个原因:

  • JavaScript 的主要作用之一是处理用户的交互,如点击按钮、填写表单等。如果JavaScript是多线程的,那么在处理这些事件时可能会出现竞态条件(race
    conditions),导致用户体验的不可预测性和不一致性。例如,如果两个线程同时尝试修改同一个DOM元素,那么最终的结果将是不可预测的。

我们可以将代码大致分为同步代码(同步任务)和异步代码(异步任务)来理解和处理JavaScript中的执行流程。

  • 同步代码:立即执行,阻塞后续代码,直到执行完成。
  • 异步代码:不立即执行,放入宿主环境的任务队列中,不阻塞主线程,异步结果在将来某个时间点成为可用,并触发相应的回调函数或Promise处理程序执行。

这种异步非阻塞的模型是JavaScript能够高效处理I/O密集型任务(如网络请求、文件读写等)的关键所在。

  • 同步代码是指按照代码书写顺序依次执行的代码。当JavaScript引擎(通常指的是V8、SpiderMonkey等JavaScript解释器)遇到同步代码时,它会立即执行这些代码,并且会“原地等待”直到这些代码执行完成。这里的“原地等待”意味着JavaScript引擎会阻塞后续代码的执行,直到当前同步代码块执行完毕。

    例如,当你执行一个循环或者调用一个函数时,如果这个函数内部不包含异步操作,那么它就是一个同步任务。同步任务会立即执行,并且在下一个任务执行之前,它会完全完成。

  • 异步代码的执行则与同步代码截然不同。当JavaScript引擎遇到异步代码时,它不会立即执行这些代码,而是会将异步操作(如定时器、网络请求、文件读写等)的回调函数或Promise等异步处理机制放入宿主环境(如浏览器或Node.js)的某个任务队列(如宏任务队列或微任务队列)中。然后,JavaScript引擎会继续执行后续的代码,而不会等待异步操作的结果。

    异步操作的结果会在将来的某个时间点成为可用,此时宿主环境会将其对应的回调函数或Promise解决(resolve)或拒绝(reject)的处理程序放入JavaScript引擎的执行栈中执行。这样,即使异步操作需要花费很长时间来完成,JavaScript引擎也不会被阻塞,可以继续处理其他任务。

在JavaScript中,异步任务确实被分为了宏任务(MacroTasks)和微任务(MicroTasks)两大类。

  • 并不是所有由JavaScript引擎发起的任务都是微任务。例如,setTimeoutsetInterval虽然是由JavaScript代码发起的,但它们是由宿主环境(浏览器或Node.js)管理的宏任务。
  • 不同的JavaScript引擎(如V8、SpiderMonkey等)和宿主环境(如不同版本的浏览器或Node.js)之间,在异步任务的处理上可能存在细微的差异。因此,在编写跨平台或跨版本的JavaScript代码时,需要注意这些差异。

宏任务是由宿主环境(如浏览器或Node.js)发起的异步任务。宏任务之间的执行是串行的,即每次只能执行一个宏任务,执行完毕后才会去执行下一个宏任务。它们通常包括:

  • script(整体代码)
  • setTimeout
  • setInterval
  • setImmediate(Node.js特有)
  • I/O
  • UI渲染
  • 事件处理(如点击、滚动等)

微任务是由JavaScript引擎发起的异步任务。与宏任务不同,微任务是在当前宏任务执行完毕后,下一个宏任务开始之前执行的。而且,微任务队列中的任务会按照它们被添加到队列中的顺序依次执行,直到微任务队列为空。它们通常包括:

  • Promise.thenPromise.catchPromise.finally
  • process.nextTick(Node.js特有)
  • MutationObserver(DOM变化观察)
  1. 从上往下执行所有的同步代码
  2. 在执行过程中遇到宏任务就存放到宏任务队列中, 遇到微任务就存放到微任务队列中
  3. 当所有的同步任务执行完毕, 就执行微任务队列中满足需求的所有回调(process.nextTick 优先 )
  4. 当微任务队列中所有满足需求的回调执行完毕后, 就执行宏任务队列中满足需求的所有回调 ( SetImmediate 最后 )
    在这里插入图片描述
1 3 4 5 1000 2

在这里插入图片描述
结果执行顺序为 : 3 2 1
在这里插入图片描述
在这里插入图片描述
输出结果为:11 14 12 15 13
在这里插入图片描述
输出结果为 :2 3 6 p2 p1 1 4 5

async function async1() {console.log('async1');await async2();console.log('async1 end');
}async function async2() {console.log('async2');
}console.log('script start');
setTimeout(function () {console.log('setTimeout');
}, 0);
async1();

在这里插入图片描述

script start
async1
async2
async1 end
setTimeout

http://www.ppmy.cn/devtools/99892.html

相关文章

【注解】反序列化时匹配多个 JSON 属性名 @JsonAlias 详解

JsonAlias 注解是 Jackson 提供的一个功能强大的注解,允许一个字段在反序列化时匹配多个 JSON 属性名。它适用于在处理多种输入数据格式时,或当 JSON 数据的键名可能变化时。 一、JsonAlias 的作用 多种别名:JsonAlias 允许你为一个字段定义…

字节微前端框架Garfish

Garfish 是字节跳动开源的微前端框架,旨在应对现代 Web 应用在前端生态繁荣与应用日益复杂化背景下的挑战。本文将介绍如何使用 Garfish,提供代码示例,并与另一流行的微前端框架 Qiankun 进行对比分析。 安装 Garfish 首先,安装…

Docker 安装与配置 Docker Registry 指南

一、安装 Docker 解压docker.tar文件: rootiZbp1h35mcqj4eppj2bo1rZ:/data/dw# tar xf docker.tar解压后检查当前目录,发现解压出一个名为 docker_install 的目录。 进入解压出的目录并查看内容: rootiZbp1h35mcqj4eppj2bo1rZ:/data/dw# cd …

leetcode-543. 二叉树的直径

题目描述 给你一棵二叉树的根节点,返回该树的 直径 。 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。这条路径可能经过也可能不经过根节点 root 。 两节点之间路径的 长度 由它们之间边数表示。 示例 1: 输入:root [1,2,3,…

Spring 中的 @ExceptionHandler 注解详解与应用

在开发 Web 应用程序时,异常处理是一个至关重要的部分。无论是用户输入错误,还是系统内部错误,如何优雅地处理这些异常,直接影响到用户体验和系统的可靠性。Spring 提供了强大的异常处理机制,其中 ExceptionHandler 注…

47.x86游戏实战-VEHHOOK封包函数

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 本次游戏没法给 内容参考于:微尘网络安全 工具下载: 链接:https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…

告别手动录入,自动化PDF转Excel工具精选

PDF文件可以跨平台高兼容,这就使得在很多需要保存页面版式的文件我们都用PDF格式进行传输。很多时候Excel文件也被这样转发,可是编辑却成为了问题,这时候要是能有pdf转换成excel的工具就能事半功倍了。 1.福昕PDF转换大师 链接一下>>…

uart16550_ip_spec

用途:允许与调制解调器或其他外部设备进行通信,例如使用串行电缆和RS232协议的另一台计算机。 核心特性: WISHBONE接口:支持32位或8位数据总线模式(可选)。 FIFO操作:仅支持FIFO(先…