正常任务（宏任务）和微任务

最近突然被问到关于正常任务（宏任务）和微任务的问题，学习js这么长时间来，还没有注意到js的任务还有宏任务和微任务的区别，在网上查找以后大概知道了什么是宏任务和微任务。

首先，宏任务包含：setTimeout/setInterval/setImmediate/整体代码script

而微任务包含:promise和process.nextTick

从结果来说，两者的区别在于在事件循环机制中，执行的机制不同，具体执行顺序是这样：

每次执行栈的同步任务执行完毕，就会去任务队列中取出完成的异步任务，队列中又分为microtasks queues和宏任务队列等到把microtasks queues所有的microtasks都执行完毕,注意是所有的,他才会从宏任务队列中取事件。等到把队列中的事件取出一个，放入执行栈执行完成，就算一次循环结束，之后event loop还会继续循环，他会再去microtasks queues执行所有的任务，然后再从宏任务队列里面取一个，如此反复循环。

同步任务执行完

去执行microtasks，把所有microtasks queues清空

取出一个macrotasks queues的完成事件，在执行栈执行

再去执行microtasks

...

...

...

所以结果上来看，当有宏任务和微任务同时在队列中时，微任务一般来说，执行的优先级较高，每次event loop都会清空一次微任务队列，而每个宏任务都会触发一次event loop

文章参考：https://yq.aliyun.com/articles/607031

原文地址：https://www.cnblogs.com/hyxlog/p/9284099.html

时间： 2024-11-08 17:22:41

正常任务（宏任务）和微任务的相关文章

js 宏任务，微任务

在了解async之后,发现一个自己不是很熟悉的点儿,在这儿记录一下 js 中存在宏任务和微任务,js 的执行顺序是 一个宏任务执行结束之后才会去执行下一个宏任务,微任务是在本宏任务的主要的任务结束之后,再去执行微任务,当所有的微任务结束之后,这个宏任务也就算执行结束了,值的注意的是,script 就是一个大的宏任务   先分类:       宏任务  srcipt > setImmediate  > messageChannel > setTimeout/setInterval     

js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）

javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环中的同步任务,异步任务: 同步和异步任务在不同的执行"场所",同步的进入主线程,异步的进入Event Table执行并注册函数. 当指定的异步事情完成时,Event Table会将这个函数移入Event Queue. 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,推

js 宏任务和微任务

1.概念:宏任务(macrotask )和微任务(microtask ) 表示异步任务的两种分类.常见宏任务:I/O .setTimeout.setInterval:微任务:Promise.then catch finally.process.nextTick 在挂起任务时,JS 引擎会将 所有任务 按照类别分到这两个队列中, 首先在 macrotask 的队列(这个队列也被叫做 task queue)中取出第一个任务,执行完毕后取出 microtask 队列中的所有任务顺序执行: 之后再取 m

12. 宏任务_微任务

执行过程: 每当执行栈为空时,就检查微任务,有则进栈执行,栈空了再去查微任务, 直到没有微任务时,去宏任务中取一个进栈执行,栈空了又开始检查微任务,循环往复,直至全都为空 宏任务: I/O (click事件.fs.writeFile) setTimeout setInterval setImmediate (nodejs) requestAnimationFrame 微任务 process.nextTick (nodejs) Promise.then().catch() console.log(

宏任务和微任务

javasript宿主环境有事件循环,异步任务会被加入到任务队列,任务队列分为两种,宏任务(macroTask)和微任务(microTask). 宏任务队列会有多个,微任务队列只有一个. 每次事件循环,先执行微任务队列,执行完后,会选择一个宏任务队列执行,然后再次执行微任务队列,完成后再挑一个宏任务队列执行.. 总之,就是 microTask queue -> macroTask queue -> microTask queue -> macroTask queue .... 结果是,微

常见宏任务与微任务

宏任务(macrotasks): 主js.UI渲染.setTimeout.setInterval.setImmediately.requestAnimationFrame.I/O等 微任务(microtasks):process.nextTick().promise.Object.observe()等 原文地址:https://www.cnblogs.com/yanze/p/11820302.html

宏任务与微任务

老规矩,先放两道题目,先看看会有什么结果输出,然后我们一起研究为什么 async function async1(){ console.log("async1 start"); await async2(); console.log("async1 end"); } async function async2(){ console.log("async2"); } console.log("script start"); se

$nextTick 宏任务 微任务 macrotasks microtasks

1.nextTick调用方法 首先看nextTick的调用方法: https://cn.vuejs.org/v2/api/#Vue-nextTick // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了 }) // 作为一个 Promise 使用 (2.1.0 起新增,详见接下来的提示) Vue.nextTick() .then(function () { // DOM 更新了 }) 即:既可以支持

总结：JavaScript异步、事件循环与消息队列、微任务与宏任务

本人正在努力学习前端,内容仅供参考.由于各种原因(不喜欢博客园的UI),大家可以移步我的github阅读体验更佳:传送门,喜欢就点个star咯,或者我的博客:https://blog.tangzhengwei.me 掘金:传送门,segmentfault:传送门 前言 Philip Roberts 在演讲 great talk at JSConf on the event loop 中说:要是用一句话来形容 JavaScript,我可能会这样: "JavaScript 是单线程.异步.非阻塞.解