经久不衰的话题:Js的宏任务(marcroTask)和微任务(microTask)

已于 2022-04-02 17:59:08 修改
阅读量1.2k 收藏
点赞数 6
分类专栏： 前端 性能优化 css 文章标签： css html vue
于 2022-04-02 17:01:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37021136/article/details/123922397
版权
前端 同时被 3 个专栏收录
13 篇文章 1 订阅
订阅专栏
性能优化
13 篇文章 2 订阅
订阅专栏
css
10 篇文章 0 订阅
订阅专栏

文章目录

前言

最近工作量比较少,闲暇时间看技术博客,一篇关于JS语言设计跟任务机制的博客读起来让我受益匪浅。温故而知新，决定本月博客主题为宏任务(marcroTask)和微任务(microTask)

一、什么是事件循环(Event loops)?

事件循环负责收集所有的代码层面的事件(包括操作者和非操作者的),把代码指定成任务进行排队。
然后在合适的时候进行回调,回调一开始,会寻找对应的等待中由代码汇合成的任务(宏任务和微任务),
在下一次循环的时候执行渲染和绘制操作(绘制部分页面和css样式)。
值得注意的是,有一些业务中出现的问题,很可能是就是由于这个事件循环机制导致的。

举个例子:我们常常在使用iframe对接第三方的时候,会出现如iframe会诸塞父级页面css等文件加载的情况
我们常常需要动态脚本等方式进行处理,才能优雅的解决这个问题,这是因为在特定情况下，同源窗口之间共享事件循环
如:

  1. 如果一个窗口打开了另一个窗口，它们可能会共享一个事件循环。
  2. 如果窗口是包含在 iframe 中，则它可能会和包含它的窗口共享一个事件循环。
  3. 在多进程浏览器中多个窗口碰巧共享了同一个进程。

二、什么是宏任务和微任务?

首先让我们看一下JS的编译模式相关解释:
在这里插入图片描述
注意其中的一句话如果一条运行不了,那么下面的语言也无法运行,显而易见说明JS为单线程语言
但是随着计算机性能的迅速发展,很明显这种模式已经跟不上性能的发展,
JS需要突破,需要一种可以提供异步编程的能力
或者说一种可以跳出队列的解析能力
于是，便有了本文的两大主角:宏任务和微任务。

举个例子：家没菜了,但是要吃饭,这个时候谁下去买菜?
答案肯定是家庭地位最高的我
1.我准备出门去买菜
2.这时候我妈让我带点调味料
3.然后我妹又说让我带杯奶茶
那么我的决策就是:优先去菜市场买菜,然后去买调味料,再去给我妹带奶茶
优先级最高的为买菜,那么这个买菜就可以称之为宏任务,宏任务完成了之后会去做微任务

目前JS可以说绝大部分都是宏任务,微任务毕竟是个别情况需要
下图简单的说明了他们俩之间的关系和运行顺序
在这里插入图片描述
在一次Event Loop里面,
各种代码被统称为任务,它们会根据上图的任务队列规则进行执行。

一个程序员宏任务和微任务是否了解已经逐渐成为面试必考的流程,不再细说。
下面列一下主流的宏任务和微任务

1. 宏任务

script(整体代码)//整个项目整体会被编译成宏任务
setTimeout//开发时候偶尔使用这个可以在数据收集完成之后再执行你的数据操作,防止数据拿不到的情况,$nextTick也是基于这个实现
setInterval//常用于写定时器,时钟这种逻辑,但是可能会栈溢出,要注意清除定时器
I/O//数据流交换
UI交互事件//页面点击事件等等
postMessage //常用于iframe里,iframe点击向父页面点击传递信息
MessageChannel //常用于两个页面(或者iframe)通信建立通道时
setImmediate(Node.js 环境) //node版本的$nextTick

2. 微任务

Promise.then //可以是宏任务也可以是微任务,很神奇的一个方法
Object.observe //如果你经常看vue代码,你会发现vue2里面就有这个observe,这个方法用来监听对象数据的变化
MutationObserver //监听指定DOM结构树发生变化的方法
process.nextTick(Node.js 环境)//node里保证方法在对象完成构造后但是在数据交互发生前调用。

总结

好记性不如烂笔头
随时随地给自己对项目的状态进行实时的记录,想来以后回忆起来也是极美的

明天,又是充满希望的一天!

最后放上一张镇楼图
在这里插入图片描述

毕竟我是崔战神阿
关注
专栏目录
JavaScript中的microtask与task
miao_9的博客
03-04 1198
JS的任务执行机制 由于 JavaScript 是单线程的，所以它只有一个Call Stack，使得 JavaScript 在执行时有一个非常重要的特性：run to complete,只要运行就直到完成。 由于是单线程，所以只能通过异步解决性能问题(否则，如果前面一个任务阻塞了，那么后续的任务都要等待，这种效果是无法接受的)。 js在执行代码时存在着两个比较重要的东西：执行栈和任务队列，这两个东...
深入理解JavaScript事件循环Event Loop：宏任务与微任务
最新发布
Allen-
05-11 809
事件循环是JavaScript运行时环境（如浏览器或Node.js）中用于协调执行代码的一种机制。「宏任务」（Macrotasks）和「微任务」（Microtasks），以确保异步操作能够有序且高效地完成，同时保证了代码的非阻塞执行特性。
异步单线程（js）宏任务与微任务
m0_64969829的博客
01-19 718
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、常见的宏任务和微任务？ 前言 提示：以下是本篇文章正文内容，下面案例可供参考 一、常见的宏任务和微任务？ 宏任务:setTimeout setInterval Dom事件, Ajax请求 微任务:Promise async/await 微任务>dom渲染>宏任务 结论:微任务执行时机比宏任务早 举例说明: console.log(1) setTimeout(()=>{ console.log(2) }
js中微任务和宏任务的区别
xingchen678的博客
11-20 6101
概念 1. 宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。 2.微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。 3. 宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。 js执行顺序，（先执行宏任务列，微任务队列）， 运行机制 1. 在执行栈中执行一个宏任务。 2. 执...
JS宏任务和微任务
m0_73481765的博客
10-23 1749
微任务会优先于下一个宏任务执行，即在当前宏任务执行完毕前，所有微任务都会被执行完毕。需要注意的是，当一个宏任务执行过程中产生新的微任务，这些微任务会在当前宏任务执行完之后立即执行。嵌套关系：在一个宏任务中产生的新的微任务，将会在当前宏任务执行完成后立即执行。而新的宏任务则需要等待当前宏任务执行完毕后才会执行。执行时机：宏任务是在主线程空闲时执行的，而微任务是在当前任务执行结束后立即执行的。执行顺序：宏任务按照先进先出的顺序执行，而微任务则会在下一个宏任务执行前优先执行。
JavaScript中的微任务和宏任务
weixin_44374938的博客
03-18 1418
在正常情况先下,JavaScript任务是同步执行的，即执行完一个前一个任务，然后执行后一个任务。也就是跟着主线任务按序执行。 只有遇到异步任务的情况下，执行顺序才会改变。这时，需要区分两种任务：宏任务与微任务。再说宏任务与微任务之前，我们先说一个概念。javaScript是一门单线程语言，所以一切javaScript版的“多线程”都是的单线程模拟出来的 一、JavaScript中的同步和异步 同步和异步其实在我们的理解中上很容易明白，同步就是我按照代码的顺序来执行程序。异步就是遇到异步程序，我直接开一.
js的异步与宏任务(marcroTask)和微任务(microTask)
好好学习，天天向上！
01-19 149
咱们先看道面试题 让写出console.log的打印顺序 console.log(100); setTimeout(()=>{ console.log(200); }) setTimeout(()=>{ console.log(201); }) Promise.resolve().then(()=>{ console.log(300); }) console.log(400); // 100 400 300 200 201 // 为什么300比200先打印
JavaScript事件循环及宏任务微任务原理解析
10-14
在JavaScript中，任务分为两类：同步任务和异步任务。同步任务是按顺序执行的，而异步任务分为宏任务（MacroTask）和微任务（MicroTask）。 宏任务主要包括：整个脚本、setTimeout、setInterval等。这些任务会在...
ajax是宏任务还是微任务,宏任务和微任务的一个小事
weixin_39695954的博客
08-06 1531
本文首发于 vivo互联网技术 微信公众号链接：作者：Ivan本文根据 JavaScript 规范入手，阐述了JS执行过程在考虑时效性和效率权衡中的演变，并通过从JS代码运行的基础机制事件队列入手，分析了JS不同任务类型(宏任务、微任务)的差别，通过这些差别给出了详细分析不同任务嵌套的复杂 JS 代码执行的分析流程。一、事件队列与回调在使用JavaScript编程时，需要用到大量的回调编程。回调，...
js的微任务和宏任务
qq_36893984的博客
08-11 187
这里主要试分析一个面试题，然后总结一下答案 console.log('1'); setTimeout(function() { console.log('2'); process.nextTick(function() { console.log('3'); }) new Promise(function(resolve) { console.log('4'); resolve(); }).then(functio
javascript中的宏任务和微任务
qq_42099097的博客
07-10 965
一、宏任务 1.宏任务所处得对了就是宏任务队列。 2.第一个宏任务队列中只有一个任务：执行主线程得js代码 3.宏任务队列可以有很多个。 4.当宏任务队列中的任务全部执行完之后，会查看当前是否有微任务，当当前的伟任务执行完之后，才会执行接下来的宏任务队列 5.eg：setTimeout ,setInterval,requestAnimationFrame 二、微任务 1.微任务所处的队列就是微任务队列 2.只有一个微任务队列 3.在上一个宏任务队列执行完毕后，如果有微任务队列，就会执行微任
宏任务与微任务
ghc19980122的博客
02-18 265
宏任务与微任务
JavaScript中的宏任务和微任务简单区分
码农桃子的博客
07-14 1369
因为宏任务太占用性能，当需要一些较早就准备好的方法，排在最后才执行的时候，又不想新增一个宏任务，那么就可以把这些方法，一个一个的放在微任务队列里面，在这个宏任务中的代码执行完后，就会执行微任务队列。异步任务指的是，不进入主线程、而进入"任务队列"的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。而异步任务，又分为宏任务和微任务，这两个任务是两个队列，所以是先进先出的。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
宏任务和微任务的区别
qq_39826423的博客
07-22 1699
宏任务和微任务的区别
JS中的宏任务与微任务
JeTanO的博客
04-27 163
一：概述：JS为单线程程序，一个时刻只会运行一段代码，只有一件事情做完之后才会做另外一件事情。 主要有以下模块： 1：任务执行线程 2：微任务队列 3：宏任务队列 4：计时器模块 执行顺序为：1>2>3 一开始JS会执行所有同步代码（阻塞），然后执行所有微任务代码（同步执行过程中遇到微任务会添加至微任务队列），最后执行宏任务代码（同步执行过程中遇到定时器类代码添加至计时器模块），计时器模块负责计时定时器类代码，到时间的添加至宏任务队列。 二：代码体现如下 setTimeout(() =>
温故知新（六八）微任务和宏任务的区别
MFWSCQ的博客
09-14 1407
微任务和宏任务的区别 答案： 微任务和宏任务是异步任务的两个分类。 宏任务：当前调用栈中执行的代码成为宏任务。（主代码块，定时器等）。 微任务：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务，可以理解为回调事件。（Promise.then，proness....
重学js -- 宏任务与微任务的理解
wodecanmeng的博客
06-24 3047
这两个概念已经出现很久了。而且几乎面试必问。那到底什么是宏任务和微任务。尤其是微任务的概念呢？ 宏任务的概念我理解的其实就是 常规的任务。我们都知道事件循环(event loop)。我们也都知道任务队列(task queue)。那么宏任务和微任务到底有啥区别。又要什么联系呢。我想把我的理解记录下来： 一、宏任务 所谓宏任务就是我们通常说的js执行的任务； 它主要包括 1、整个script标签中的代码，也就是全局的代码，算一个宏任务； 2、我们注册的事件回调，比如click事件的回调。 3、setTimeou
setTimeout和Promise区别（宏任务和微任务）
热门推荐
RistonTea的博客
10-10 1万+
javascript的宏任务和微任务 宏任务有Event Table、Event Queue，微任务有Event Queue 1.宏任务：包括整体代码script，setTimeout，setInterval； 2.微任务：Promise，process.nextTick 注：Promise立即执行，then函数分发到微任务Event Queue，process.nextTick分发到微任...
js宏任务和微任务
05-24
在 JavaScript 中，事件循环（Event Loop）是一个非常重要的概念。事件循环是一种机制，用于执行异步任务，以保证 JavaScript 在单线程的情况下能够处理多个任务。 在事件循环中，我们通常将任务分为宏任务（macro task）和微任务（micro task）两类。 宏任务是由浏览器或 Node.js 的 API 提供的异步任务，例如 setTimeout、setInterval、requestAnimationFrame、I/O 操作等。这些任务会被添加到任务队列（task queue）中，当主线程执行完当前任务后，会从队列中取出一个宏任务执行，直到队列为空。 微任务则是在当前任务执行结束后立即执行的异步任务，例如 Promise 的回调函数、MutationObserver 的回调函数等。这些任务会被添加到微任务队列（microtask queue）中，当主线程执行完当前任务后，会从微任务队列中按顺序取出所有任务执行，直到队列为空。 需要注意的是，微任务的执行优先级高于宏任务，也就是说，在执行宏任务过程中，如果有微任务需要执行，会先执行完所有微任务，然后再执行下一个宏任务。 下面是一个示例代码，用于演示宏任务和微任务的执行顺序： ```javascript console.log('start'); setTimeout(() => { console.log('setTimeout'); }, 0); Promise.resolve().then(() => { console.log('Promise'); }); console.log('end'); ``` 上述代码中，先执行同步代码，输出 `start` 和 `end`，然后将 `setTimeout` 函数添加到宏任务队列中，并将 Promise 的回调函数添加到微任务队列中。最后，按顺序取出微任务队列中的任务，输出 `Promise`，再取出宏任务队列中的任务，输出 `setTimeout`。 输出结果如下： ``` start end Promise setTimeout ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值