宏任务与微任务:JavaScript异步编程的秘密

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

    • 摘要:
    • 引言:
    • 正文:
      • 1️⃣ 宏任务(Macrotask)
      • 2️⃣ 微任务(Microtask)
      • 3️⃣ 执行顺序
      • 4️⃣ 应用场景
    • 总结:
    • 参考资料:

摘要:

本文将详细介绍JavaScript中的宏任务和微任务的概念、执行顺序以及在异步编程中的应用,帮助您理解这一关键的异步处理机制。

引言:

🌐 在JavaScript中,事件循环是实现异步编程的核心。宏任务和微任务是事件循环中的两个重要概念,它们定义了异步代码的执行顺序。接下来,让我们一起来探索宏任务和微任务的魅力。

正文:

1️⃣ 宏任务(Macrotask)

宏任务(Macrotask)是 JavaScript 中的一个概念,它指的是那些需要较长时间才能完成的任务。宏任务通常在主线程上执行,可能会阻塞主线程的渲染。宏任务主要包括以下几种:

  1. script(整体代码)
  2. setTimeout
  3. setInterval
  4. I/O 操作(如读写文件、网络请求等)
  5. UI 渲染

宏任务与微任务(Microtask)相对应,微任务通常指的是那些可以快速完成的任务,例如处理一些数据、执行一些函数等。在 JavaScript 中,微任务主要通过 Promise、async/await 等语法实现。

宏任务与微任务的区分主要是根据任务的执行时间,宏任务通常需要较长时间才能完成,而微任务通常可以在较短的时间内完成。

在 JavaScript 引擎中,宏任务和微任务是分开执行的。当主线程空闲时,JavaScript 引擎会执行微任务;当有宏任务需要执行时,JavaScript 引擎会暂停微任务的执行,先执行宏任务。这样可以确保主线程的实时性,提高页面的响应速度。

宏任务主要包括:

  • 整体代码script(整体代码执行)
  • 渲染事件(如DOMContentLoaded)
  • 定时器(setTimeout、setInterval)
  • I/O(如读写文件、网络请求)
  • UI交互事件(如click、scroll)
  • 消息队列(如Web Workers)

2️⃣ 微任务(Microtask)

微任务(Microtask)是 JavaScript 中的一个概念,它指的是那些可以快速完成的任务。微任务通常在主线程上执行,不会阻塞主线程的渲染。微任务主要包括以下几种:

  1. Promise
  2. async/await
  3. MutationObserver
  4. IntersectionObserver

微任务与宏任务(Macrotask)相对应,宏任务通常指的是那些需要较长时间才能完成的任务,例如处理一些数据、执行一些函数等。在 JavaScript 中,宏任务主要通过 setTimeout、setInterval 等语法实现。

微任务与宏任务的区分主要是根据任务的执行时间,微任务通常需要较短的时间才能完成,而宏任务通常需要较长时间才能完成。

在 JavaScript 引擎中,微任务和宏任务是分开执行的。当主线程空闲时,JavaScript 引擎会执行微任务;当有宏任务需要执行时,JavaScript 引擎会暂停微任务的执行,先执行宏任务。这样可以确保主线程的实时性,提高页面的响应速度。

微任务主要包括:

  • Promise.then()
  • async/await
  • MutationObserver
  • Object.observe(已废弃)
  • 手动执行的微任务队列(如process.nextTick())

3️⃣ 执行顺序

在JavaScript中,事件循环按顺序执行宏任务和微任务。每个宏任务执行完毕后,会执行所有微任务,然后继续下一个宏任务,如此循环。这种机制确保了异步代码的有序执行。

4️⃣ 应用场景

宏任务和微任务在实际开发中有广泛应用,例如:

  • 实现轮播图、动画等需要与UI交互的功能。
  • 实现复杂的异步逻辑,如数据处理、网络请求等。
  • 优化页面性能,如使用微任务进行数据更新,避免重排和重绘。

总结:

🎉 宏任务和微任务是JavaScript异步编程的关键概念,它们定义了异步代码的执行顺序。通过了解宏任务和微任务的概念、执行顺序以及应用场景,我们可以更好地利用它们实现高效的异步编程。

参考资料:

  • 宏任务与微任务 百度百科
  • MDN Web Docs - JavaScript 事件循环
  • JavaScript宏任务与微任务解析

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/737928.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高等数学常用公式

高等数学常用公式 文章目录 内容大纲 内容 大纲 感谢观看 期待关注 有问题的小伙伴请在下方留言,喜欢就点个赞吧

并发容器介绍(二)

并发容器介绍(二) 文章目录 并发容器介绍(二)BlockingQueueBlockingQueue 简介ArrayBlockingQueueLinkedBlockingQueuePriorityBlockingQueue ConcurrentSkipListMap 文章来自Java Guide 用于学习如有侵权,立即删除 Bl…

c语言:甲流疫情死亡率

甲流疫情死亡率 任务描述 甲流并不可怕,在中国,它的死亡率并不是很高。请根据截止2009年12月22日各省报告的甲流确诊数和死亡数,计算甲流在各省的死亡率。 输入格式: 输入仅一行,有两个整数,第一个为确诊数&#xf…

YOLO V9 C++版本部署

文章目录 一、环境配置二、编译三、运行yolo四、测试效果 一、环境配置 下载MNN git clone https://github.com/alibaba/MNN.git下载MNN-YOLO git clone https://github.com/wangzhaode/mnn-yolo.git二、编译 ### compile mnn ### cd MNN mkdir build_s cd build_s/ cmake …

算法刷题Day6 | 242.有效的字母异位词、349. 两个数组的交集、202. 快乐数、1. 两数之和

目录 0 哈希表 哈希函数1 有效的字母异位词1.1 string的回顾1.2 我的代码 2 两个数组的交集2.1 unordered_set 介绍2.2 我的解题(set) 3 快乐数3.1 我的解题(set) 4 两数之和4.1 暴力求解4.2 哈希表(map) &…

vue-cli自定义创建项目-eslint依赖冲突解决方式

创建项目步骤 概览: 在安装 npm安装时会报错 npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: vue/eslint-config-standard6.1.0 npm ERR! Found: eslint-plugin-vue8.7.1 npm ERR! node_modules/eslint-plugin…

公网ip和局域网ip

什么是公网IP? 公网,俗称外网,又被叫做互联网,是连接不同地区局域网或者城域网计算机的通信的远程网络。通常可以跨接很大的物理范围,连接多个地区、城市和国家提供远距离通信,形成全球性的互联网络。因此…

开源好用的所见即所得(WYSIWYG)编辑器:Editor.js

文章目录 特点基于区块干净的数据 界面与交互插件标题和文本图片列表Todo表格 使用安装创建编辑器实例配置工具本地化自定义样式 今天介绍一个开源好用的Web所见即所得(WYSIWYG)编辑器: Editor.js Editor.js 是一个基于 Web 的所见即所得富文本编辑器,它…

爬虫怎么使用代理IP通过HTML和CSS采集数据?

使用爬虫采集数据时,有时为了隐藏真实IP地址或规避某些网站的限制,我们需要使用代理IP。同时,通过HTML和CSS选择器,我们可以定位并提取页面中的特定数据。以下是一个基本的步骤说明,以Python的requests和BeautifulSoup…

nodejs版本过高导致vue-cli项目无法正常运行解决方案

95% emitting CompressionPlugin ERROR Error: error:0308010C:digital envelope routines::unsupported 方法一:在使用 npm run dev之前使用 set NODE_OPTIONS--openssl-legacy-provider Error: error:0308010C:digital envelope routines::unsupported 解决方法…

3.11_C++_day1_作业

作业要求&#xff1a; 程序代码&#xff1a; #include <iostream> #include <string.h>using namespace std;int main() {int a0,b0,c0,d0,e0;//分别记录字符串中的大写&#xff0c;小写&#xff0c;数字&#xff0c;空格&#xff0c;其他字符个数string str;cha…

考完PMP考什么?趁热打铁!

拿到一个PMP认证并不是终点&#xff0c;而是起点&#xff0c;职场的竞争是非常激烈的&#xff0c;只有不断学习才能站稳脚跟&#xff01;建议大家可以趁热打铁&#xff0c;多考几个证书&#xff0c;以下是推荐了考完PMP后可以考的热门证书。 1.软考 软考是计算机技术与软件专业…

JVM对象创建与内存分配机制分析

JVM对象创建与内存分配机制分析 前言一、对象的创建二、分配内存1&#xff09;内存划分2&#xff09;本地线程分配缓冲 三、初始化四、设置对象头五、执行< init>方法六、对象内存分配七、对象内存回收可达性分析算法&#xff1a; 总结 前言 最新的 Java 面试题&#xf…

C++作业day1

2> 试编程 提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 要求使用C风格字符串完成 #include <iostream> #include <string.h>using namespace std;int main() {string str;cout << "请输…

C++学习笔记:红黑树

红黑树 什么是红黑树红黑树的规则红黑树节点的定义红黑树的插入空树插入非空插入条件判断新插入的节点 cur 不为 root 且 parent->_col 为红就需要调整父节点为左 grandf->left parent当uncle节点为红色时,只需要进行颜色调整,即可当uncle为空 或 者存在但是为黑parent …

【ICer的脚本练习】给模块顶层生成一个dummy文件 —— gen_dummy

系列的目录说明请见:ICer的脚本练习专栏介绍与全流程目录-CSDN博客 通过这篇文章,咱们来系统的看一下一个典型的python脚本应用和正则表达式的使用。 gen_dummy这个脚本的应用场景是这样的:在已经确定了顶层接口之后,模块的开发人员A开始模块编码。而此时上层的开发人员B需…

案例分析篇07:数据库设计相关28个考点(23~28)(2024年软考高级系统架构设计师冲刺知识点总结系列文章)

专栏系列文章推荐: 2024高级系统架构设计师备考资料(高频考点&真题&经验)https://blog.csdn.net/seeker1994/category_12601310.html 【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】(2024年软考高级系统架构设计师冲刺知识点总结-案例分析篇-…

服务器主机云主机在日常维护需要注意的几个点

服务器的日常维护对于确保服务器的稳定运行和安全性非常重要&#xff0c;以下是一些常见的服务器日常维护方面&#xff1a; 定期更新操作系统和软件&#xff1a;确保服务器的操作系统、应用程序以及安全补丁都是最新的&#xff0c;以填补已知的安全漏洞和提高系统性能。监视服务…

【网络安全】-数字证书

数字证书 数字证书是互联网通讯中用于标志通讯各方身份信息的一串数字或数据&#xff0c;它为网络应用提供了一种验证通信实体身份的方式。具体来说&#xff0c;数字证书是由权威的证书授权&#xff08;CA&#xff09;中心签发的&#xff0c;包含公开密钥拥有者信息以及公开密…

Python 学习——Python BeautifulSoup 库文档

目录 一、 Beautiful Soup 4.4.0 文档1.1 寻求帮助 二、 快速开始三、 安装 Beautiful Soup3.1 安装完成后的问题3.2 安装解析器 四、 如何使用五、 对象的种类5.1 Tag5.1.1 Name5.1.2 Attributes5.1.3 多值属性 5.2 可以遍历的字符串5.3 BeautifulSoup5.4 注释及特殊字符串 六…