JS同步任务、异步任务（宏任务和微任务）【JavaScript面试题 有详细代码例子说明！！】

详细及代码、画图讲解分享 记得一键三连哦！！！一起学习！我们终将越来越好！相信我们！！！

先执行所有的同步任务【注意是全部的同步任务执行完毕后】，再执行异步任务！！ 要执行宏任务前提是清空了全部的微任务。

任务分类：

js事件循环中的任务分为两类：同步任务和异步任务。
同步任务是按照代码顺序依次执行的任务，而异步任务则是在任务队列中等待执行的任务，例如定时器回调函数、事件回调函数和Promise回调函数等。** 异步任务又可以分为宏任务和微任务，微任务的执行优先级高于宏任务。当一个宏任务中的所有微任务都执行完毕后，才会执行下一个宏任务。事件循环的工作流程是不断地从任务队列中取出任务并执行，直到队列为空为止。**

同步任务：

同步任务是指在主线程上立即执行的任务，这些任务会按照代码中的顺序依次执行，不会跳转到其他任务中去，只有当前任务执行完毕后才会执行下一个任务。

常见的同步任务包括：

• 普通的变量声明和赋值
• new Promise() 构造函数中的执行代码
• 函数的调用（如果函数内部没有异步操作）

function sayHello() {
   
   
  console.log('Hello, world!');
}

sayHello(); // 函数的调用，同步执行，打印 'Hello, world!'

• 控制语句（如if、for、while等）
• 同步的I/O操作（虽然在现实应用中I/O操作往往是异步的，但这里指的是那些被设计为同步的I/O操作）

const fs = require('fs');

// 同步读取文件内容
const data = fs.readFileSync('example.txt', 'utf8');
console.log(data); // 只有在文件读取完毕后才会执行这一行

异步任务：

宏任务（Macro Task）：

宏任务是指那些由事件循环管理的、每次循环迭代中执行的任务。宏任务通常包含一些较大的操作，如整体的代码脚本、setTimeout、setInterval、I/O操作、UI事件等。

常见的宏任务有：

• setTimeout()
• setInterval()
• I/O操作（如文件读取、网络请求等，这些在现代JavaScript环境中通常是异步的）
• UI事件（如鼠标点击、键盘输入等）
• postMessage（一个用于跨源或跨文档通信的API。它允许一个窗口向另一个窗口发送消息。通常用于在不同的窗口、iframe、标签页或Web Worker之间进行通信。）
• MessageChannel（允许两个不同的脚本【运行在同一个文档的不同浏览器上下文，如两个iframe，文档主体和一个iframe，或使用SharedWorker的两个文档】通过双向频道直接通讯。）
• setImmediate(Node.js 环境) （用于在当前事件循环迭代之后立即执行回调，但在I/O事件的回调之前。它属于Node.js特有的异步编程机制。）

微任务（Micro Task）：

微任务是指那些需要在当前宏任务结束后、下一个宏任务开始之前立即执行的任务。微任务通常是一些需要尽快执行的小操作，如Promise的回调、MutationObserver等。

常见的微任务有：

• Promise.then()、
• Promise.catch()、
• Promise.finally()的回调
• MutationObserver的回调（在 DOM 树发生指定变化时被调用）

执行顺序：

在JavaScript的事件循环中，任务的执行顺序如下：

1. 执行同步任务（在主线程上）
2. 执行所有微任务（微任务队列中的任务）
3. 执行一个宏任务（宏任务队列中的一个任务）
4. 重复步骤2和3，直到所有的任务都被执行完毕

需要注意的是，每次事件循环都会先执行完所有的微任务，然后再执行一个宏任务。这意味着，如果在执行宏任务的过程中产生了新的微任务，这些微任务会在当前宏任务执行完毕后、下一个宏任务执行之前被立即执行。

例题一：

for (var i = 0; i < 3; i++) {
   
   
    setTimeout