理解宏任务和微任务：JavaScript 异步编程的必备知识(下)

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

4. 使用场景
- 分析宏任务和微任务在实际开发中的常见使用场景
- 提供代码示例以加深理解
5. 优缺点比较
- 对比宏任务和微任务的优缺点
6. 总结
- 总结宏任务和微任务的关键概念和特点

4. 使用场景

分析宏任务和微任务在实际开发中的常见使用场景

宏任务和微任务在实际开发中有很多常见的使用场景，下面列举一些常见的例子：

异步操作的回调处理：在实际开发中，我们经常会使用异步操作，例如setTimeout()、XMLHttpRequest等。这些异步操作的回调函数通常会在宏任务中执行。例如，在上述示例中，setTimeout()的回调函数console.log('timeout')就是一个宏任务。
Promise 的回调处理：Promise 是 JavaScript 中的一种异步操作，它的回调函数通常会在微任务中执行。例如，在上述示例中，Promise.resolve().then(() => {console.log('promise')})就是一个微任务。
事件监听器的回调处理：在网页开发中，我们经常会使用事件监听器来处理用户的交互行为，例如点击、鼠标移动等。这些事件监听器的回调函数通常会在宏任务中执行。
动画和渲染：在网页开发中，我们经常会使用动画和渲染来提高用户体验。这些动画和渲染通常会使用requestAnimationFrame()函数来实现，而requestAnimationFrame()的回调函数通常会在微任务中执行。
数据加载和处理：在网页开发中，我们经常需要从服务器加载数据，并在客户端进行处理和渲染。这些数据加载和处理操作通常会使用异步操作来实现，例如XMLHttpRequest、fetch()等。这些异步操作的回调函数通常会在宏任务中执行。

在这里插入图片描述

总之，宏任务和微任务在实际开发中有很多常见的使用场景，它们可以帮助我们更好地处理异步操作和用户交互，提高程序的性能和用户体验。

提供代码示例以加深理解

宏任务：

console.log('start');setTimeout(() => {console.log('timeout');
}, 0);console.log('end');

在这个示例中，console.log('start') 和 console.log('end') 是宏任务，会在当前事件循环中立即执行。setTimeout(() => {console.log('timeout')}, 0) 是一个宏任务，它会被放入事件队列中，等待当前事件循环结束后执行。

输出结果为：

start
end
timeout

可以看到，timeout 宏任务在 end 宏任务之后执行，因为它被放入了事件队列中。

微任务：

console.log('start');Promise.resolve().then(() => {console.log('promise');
});console.log('end');

在这个示例中，console.log('start') 和 console.log('end') 是宏任务，会在当前事件循环中立即执行。Promise.resolve().then(() => {console.log('promise')}) 是一个微任务，它会被放入微任务队列中，在当前事件循环的所有任务执行完毕后立即执行。

输出结果为：

start
end
promise

可以看到，promise 微任务在 end 宏任务之后执行，因为它被放入了微任务队列中。

宏任务和微任务的混合使用：

console.log('start');Promise.resolve().then(() => {console.log('promise');
});setTimeout(() => {console.log('timeout');
}, 0);console.log('end');

在这个示例中，有宏任务和微任务。console.log('start')、console.log('end') 和 setTimeout(() => {console.log('timeout')}, 0) 是宏任务，会在当前事件循环中立即执行。Promise.resolve().then(() => {console.log('promise')}) 是一个微任务，它会被放入微任务队列中，在当前事件循环的所有任务执行完毕后立即执行。

输出结果为：

start
end
promise
timeout

可以看到，promise 微任务在 end 宏任务之后执行，因为它被放入了微任务队列中。timeout 宏任务在微任务队列中的所有任务执行完毕后执行，因为它被放入了事件队列中。

5. 优缺点比较

对比宏任务和微任务的优缺点

宏任务和微任务都有其独特的优点和缺点，具体如下：

宏任务的优点：

能够处理复杂的业务逻辑：宏任务可以包含多个操作，例如多个异步请求的处理，可以在一个宏任务中完成，提高了代码的可读性和可维护性。
能够控制任务的执行顺序：宏任务按照事件队列的顺序执行，可以通过调整任务在事件队列中的位置来控制任务的执行顺序。
可以处理长时间运行的任务：宏任务可以处理需要长时间运行的任务，例如文件读取、网络请求等，不会阻塞浏览器的渲染和用户交互。

宏任务的缺点：

执行效率较低：宏任务需要等待当前事件循环结束后才能执行，可能会导致一些性能问题，特别是在需要频繁更新 UI 的场景中。
无法及时响应用户交互：宏任务可能会导致用户交互的响应延迟，因为它们需要等待当前事件循环结束后才能执行。

在这里插入图片描述

微任务的优点：

执行效率高：微任务可以在当前事件循环中立即执行，不需要等待当前事件循环结束，能够及时响应用户交互。
能够处理需要立即执行的任务：微任务适用于需要立即执行的任务，例如清理内存、更新 UI 等。
可以提高程序的性能：微任务可以在当前事件循环中立即执行，减少了不必要的等待时间，提高了程序的性能。

在这里插入图片描述

微任务的缺点：

无法处理复杂的业务逻辑：微任务通常只能执行一些简单的操作，例如更新 UI、清理内存等，无法处理复杂的业务逻辑。
可能会导致程序的不稳定性：微任务的执行顺序是不确定的，如果微任务之间存在依赖关系，可能会导致程序的不稳定性。
难以调试：微任务的执行顺序是不确定的，难以通过调试工具进行调试。

在这里插入图片描述

综上所述，宏任务和微任务都有其独特的优点和缺点，在实际开发中需要根据具体情况选择合适的任务类型。对于需要处理复杂业务逻辑的任务，可以使用宏任务；对于需要及时响应用户交互的任务，可以使用微任务。同时，需要注意任务之间的依赖关系，避免出现不稳定性问题。

6. 总结

总结宏任务和微任务的关键概念和特点

宏任务和微任务是 JavaScript 中的两个关键概念，它们的特点如下：

宏任务（Macro Task）

关键概念：宏任务是指需要等待当前事件循环结束后才能执行的任务。它们通常由宿主环境（如浏览器或 Node.js）创建，并放入事件队列中等待执行。
特点：
- 异步执行：宏任务是异步执行的，它们不会阻塞当前执行的代码。
- 按照顺序执行：宏任务按照事件队列中的顺序依次执行，先进入队列的宏任务先执行。
- 可以包含多个操作：宏任务可以包含多个操作，例如多个异步请求的处理。
- 常见的宏任务：setTimeout()、setInterval()、XMLHttpRequest、I/O 操作等。

在这里插入图片描述

微任务（Micro Task）

关键概念：微任务是指在当前事件循环中立即执行的任务。它们由 JavaScript 引擎自身创建，并放入微任务队列中等待执行。
特点：
- 即时执行：微任务会在当前事件循环的末尾立即执行，不会等待其他任务。
- 按照顺序执行：微任务按照微任务队列中的顺序依次执行，先进入队列的微任务先执行。
- 可以包含多个操作：微任务也可以包含多个操作，但通常只用于处理一些简单的任务，例如更新 UI、清理内存等。
- 常见的微任务：Promise的回调函数、 MutationObserver的回调函数等。

在这里插入图片描述