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

news/2024/11/13 3:39:35/

在这里插入图片描述

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

文章目录

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

4. 使用场景

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

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

  1. 异步操作的回调处理:在实际开发中,我们经常会使用异步操作,例如setTimeout()XMLHttpRequest等。这些异步操作的回调函数通常会在宏任务中执行。例如,在上述示例中,setTimeout()的回调函数console.log('timeout')就是一个宏任务。

  2. Promise 的回调处理:Promise 是 JavaScript 中的一种异步操作,它的回调函数通常会在微任务中执行。例如,在上述示例中,Promise.resolve().then(() => {console.log('promise')})就是一个微任务。

  3. 事件监听器的回调处理:在网页开发中,我们经常会使用事件监听器来处理用户的交互行为,例如点击、鼠标移动等。这些事件监听器的回调函数通常会在宏任务中执行。

  4. 动画和渲染:在网页开发中,我们经常会使用动画和渲染来提高用户体验。这些动画和渲染通常会使用requestAnimationFrame()函数来实现,而requestAnimationFrame()的回调函数通常会在微任务中执行。

  5. 数据加载和处理:在网页开发中,我们经常需要从服务器加载数据,并在客户端进行处理和渲染。这些数据加载和处理操作通常会使用异步操作来实现,例如XMLHttpRequestfetch()等。这些异步操作的回调函数通常会在宏任务中执行。

在这里插入图片描述

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

提供代码示例以加深理解

  1. 宏任务:
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 宏任务之后执行,因为它被放入了事件队列中。

  1. 微任务:
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 宏任务之后执行,因为它被放入了微任务队列中。

  1. 宏任务和微任务的混合使用:
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. 优缺点比较

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

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

  1. 宏任务的优点:
  • 能够处理复杂的业务逻辑:宏任务可以包含多个操作,例如多个异步请求的处理,可以在一个宏任务中完成,提高了代码的可读性和可维护性。
  • 能够控制任务的执行顺序:宏任务按照事件队列的顺序执行,可以通过调整任务在事件队列中的位置来控制任务的执行顺序。
  • 可以处理长时间运行的任务:宏任务可以处理需要长时间运行的任务,例如文件读取、网络请求等,不会阻塞浏览器的渲染和用户交互。
    在这里插入图片描述
  1. 宏任务的缺点:
  • 执行效率较低:宏任务需要等待当前事件循环结束后才能执行,可能会导致一些性能问题,特别是在需要频繁更新 UI 的场景中。
  • 无法及时响应用户交互:宏任务可能会导致用户交互的响应延迟,因为它们需要等待当前事件循环结束后才能执行。

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

6. 总结

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

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

  1. 宏任务(Macro Task)
  • 关键概念:宏任务是指需要等待当前事件循环结束后才能执行的任务。它们通常由宿主环境(如浏览器或 Node.js)创建,并放入事件队列中等待执行。

  • 特点:

    • 异步执行:宏任务是异步执行的,它们不会阻塞当前执行的代码。
    • 按照顺序执行:宏任务按照事件队列中的顺序依次执行,先进入队列的宏任务先执行。
    • 可以包含多个操作:宏任务可以包含多个操作,例如多个异步请求的处理。
    • 常见的宏任务:setTimeout()setInterval()XMLHttpRequestI/O 操作等。

在这里插入图片描述

  1. 微任务(Micro Task)
  • 关键概念:微任务是指在当前事件循环中立即执行的任务。它们由 JavaScript 引擎自身创建,并放入微任务队列中等待执行。

  • 特点:

    • 即时执行:微任务会在当前事件循环的末尾立即执行,不会等待其他任务。
    • 按照顺序执行:微任务按照微任务队列中的顺序依次执行,先进入队列的微任务先执行。
    • 可以包含多个操作:微任务也可以包含多个操作,但通常只用于处理一些简单的任务,例如更新 UI、清理内存等。
    • 常见的微任务:Promise的回调函数、 MutationObserver的回调函数等。

在这里插入图片描述

总的来说,宏任务和微任务都是 JavaScript 中用于处理异步操作的机制。宏任务用于处理需要等待一段时间才能完成的任务,而微任务用于处理需要立即执行的任务。在实际开发中,根据任务的特点选择合适的任务类型可以提高程序的性能和响应能力。


http://www.ppmy.cn/news/1255006.html

相关文章

『亚马逊云科技产品测评』活动征文|基于亚马逊云EC2搭建OA系统

授权声明:本篇文章授权活动官方亚马逊云科技文章转发、改写权,包括不限于在 Developer Centre, 知乎,自媒体平台,第三方开发者媒体等亚马逊云科技官方渠道 亚马逊EC2云服务器(Elastic Compute Cloud)是亚马…

Asp.net core WebApi 配置自定义swaggerUI和中文注释,Jwt Bearer配置

1.创建asp.net core webApi项目 默认会引入swagger的Nuget包 <PackageReference Include"Swashbuckle.AspNetCore" Version"6.2.3" />2.配置基本信息和中文注释&#xff08;默认是没有中文注释的&#xff09; 2.1创建一个新的controller using Micr…

SpringBoot整合Kafka

SpringBoot整合Kafka 文章目录 SpringBoot整合Kafka下载与安装创建topic&#xff0c;测试生产消费程序SpringBoot整合Kafka导坐标做配置做客户端 下载与安装 下载地址&#xff1a; https://kafka.apache.org/downloads 下载2的版本&#xff0c;3.的版本会报错 解压安装&#x…

检查您的手机浏览器是否支持WebRTC技术

要检查您的手机浏览器是否支持WebRTC技术&#xff0c;可以通过以下方法&#xff1a; 方法1&#xff1a;使用WebRTC测试网站 访问测试网站&#xff1a; 在手机浏览器中&#xff0c;访问一个专门用于检测WebRTC支持的网站&#xff0c;例如Test WebRTC或WebRTC Troubleshooter.这…

Tektronix泰克示波器

一、what’s the oscilloscope&#xff1f; 【ref】https://www.tek.com.cn/blog/what-is-an-oscilloscope 二、基础知识 1、带宽&#xff1a;100Mhz&#xff1b;采样率&#xff1a;2.5GS/s 1GS/s指的是采样率&#xff0c;前面大写的S是sample采样的意思 后面的s是秒 也就是示波…

mysql常见配置文件参数

1)mysql常用配置文件参数 MySQL的配置文件通常位于安装目录下的 my.cnf 或 my.ini 文件中。在Unix/Linux操作系统上&#xff0c;MySQL配置文件被命名为 my.cnf。在Windows操作系统上&#xff0c;MySQL配置文件被命名为 my.ini。 [mysqld] max_connections&#xff1a;该参数定…

使用trigger-forward跨流水线传递参数

参考文档&#xff1a;https://docs.gitlab.com/ee/ci/yaml/#triggerforward 今天给大家介绍一个gitlab CI/CD的关键字 - forward&#xff0c;该关键字是一个比较偏的功能&#xff0c;但同时也是一个很实用的功能&#xff0c;我们通过在gitlab的ci文件中使用forward关键字&#…

如何关闭vue项目中的[eslint]校验

要关闭Vue项目中的ESLint校验&#xff0c;可以按照以下步骤进行操作&#xff1a; 打开项目根目录下的.eslintrc.js文件&#xff08;如果没有该文件&#xff0c;则创建一个新的&#xff09;。在文件中添加以下代码&#xff1a;module.exports {// 其他配置项...rules: {// 禁用…