宏任务与微任务的理解

宏任务与微任务是什么？
- 宏任务与微任务表示异步任务的两种分类
- 宏任务：包括整体代码script(可以理解为外层同步代码)、settimeout、setInterval、i/o、ui render
- 微任务：promise、object.observe、MutationObserver(监听DOM树的变化)
- 因为异步任务放在队列中，自然而然宏任务与微任务就存放在宏任务队列与微任务队列中
代码的执行顺序：先执行主线程执行栈中的代码（同步任务），那异步任务怎样执行的？
- 先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕（事件循环EventLoop）。
简言之就是放入队列时宏任务、微任务不分优先级，但是将队列中的代码拿到执行栈中执行微任务优先（当微任务队列的所有任务全部执行完后，才开始执行宏任务）

相关试题

setTimeout(function() {console.log('1');
})
new Promise(function(resolve) {console.log('2');
}).then(function() {console.log('3');
})
console.log('4');
//打印顺序 2 4 3 1

执行顺序

遇到setTimeout，异步宏任务将其放到宏任务列表中命名为time1
new Promise 在实例化过程中所执行的代码都是同步执行的（function中的代码），输出2
将Promise中注册的回调函数放到微任务队列中，命名为then1
执行同步任务cosole…log(‘4’) ，输出4，至此执行栈中的代码执行完毕
从微任务队列取出任务then1到主线程中，输出3，至此微任务队列为空
从宏任务队列中取出任务time1到主线程中，输出1，至此宏任务队列为空

console.log(1)
setTimeout(function(){console.log(2);let promise = new Promise(function(resolve, reject) {console.log(7);resolve()}).then(function(){console.log(8)});
},1000);
setTimeout(function(){console.log(10);let promise = new Promise(function(resolve, reject) {console.log(11);resolve()}).then(function(){console.log(12)});
},0);
let promise = new Promise(function(resolve, reject) {console.log(3);resolve()
}).then(function(){console.log(4)
}).then(function(){console.log(9)
});
console.log(5)

执行顺序

执行同步任务console.log(1) ,输出1
遇到setTimeout放到宏任务队列中，命名time1
遇到setTimeout放到宏任务队列中，命名time2
new Promise 在实例化过程中所执行的代码都是同步执行的（function中的代码），输出3
将Promise中注册的回调函数放到微任务队列中，命名为then1
将Promise中注册的回调函数放到微任务队列中，命名为then2
执行同步任务console.log(5),输出5
从微任务队列取出任务then1到主线程中，输出4
从微任务队列取出任务then2到主线程中，输出9，至此微任务队列为空
从宏任务队列中取出time2(注意这里不是time1的原因是time2的执行时间为0)
执行同步任务console.log(10),输出10
new Promise 在实例化过程中所执行的代码都是同步执行的（function中的代码），输出11
将Promise中注册的回调函数放到微任务队列中，命名为then3，至此宏任务time2执行完成
从微任务队列取出任务then3到主线程中，输出12，至此微任务队列为空
从宏任务队列中取出time1，至此宏任务队列为空
执行同步任务console.log(2),输出2
new Promise 在实例化过程中所执行的代码都是同步执行的（function中的代码），输出7
将Promise中注册的回调函数放到微任务队列中，命名为then4，至此宏任务time1执行完成
从微任务队列取出任务then3到主线程中，输出8，至此微任务队列为空

练手题

console.log('1');setTimeout(function() {console.log('2');process.nextTick(function() {console.log('3');})new Promise(function(resolve) {console.log('4');resolve();}).then(function() {console.log('5')})
})
process.nextTick(function() {console.log('6');
})
new Promise(function(resolve) {console.log('7');resolve();
}).then(function() {console.log('8')
})setTimeout(function() {console.log('9');process.nextTick(function() {console.log('10');})new Promise(function(resolve) {console.log('11');resolve();}).then(function() {console.log('12')})
})
// 1 7 6 8 2 4 3 5 9 11 10 12

再附一张同步任务和异步任务的执行过程

参考文章:https://juejin.cn/post/6844903512845860872
参考文章:http://www.bugshouji.com/app-index-run?app=search
参考文章:点击查看

宏任务与微任务的理解相关推荐

js中的事件循环和宏任务和微任务的理解
参考许多大神的文章,写下自己的理解事件循环: 说到事件循环就得谈到js中同步和异步的执行顺序 1.javascript将任务分为同步任务和异步任务,同步任务放到主线中,异步函数首先进行回调函数注册. ...
js---对事件循环宏任务和微任务的理解
一.JS特点 Js作为一门单线程语言,即一次只能完成一个任务,当有多个任务时,任务就得进行排队等待执行,只能等待自己的前一个任务执行完成后自己才能执行. 二.JS事件循环要理解JS的事件循环的就必须 ...
宏任务和微任务的理解
目录一.什么是宏任务和微任务? 二.JS为什么要区分宏任务和微任务? 三.宏任务.微任务有哪些? 四.宏任务.微任务是怎么执行的? 五.案例例一: 例二: 例三: 例四: 例五: 最后总结一.什 ...
一篇文章理解JS中同步任务和异步任务以及宏任务与微任务的原理和执行机制
前言: javascript是一种单线程编程语言, 一般来说它的执行顺序是按照从上到下执行,但是有些特殊情况则会改变这样的执行顺序,我们需要理解和掌握其中的原理,需要了解同步任务和异步任务以及宏任务和 ...
js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）...
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环事件循环 ...
简单易懂的宏任务和微任务执行顺序
背景很多朋友在写面试题:宏任务与微任务的执行时机时,容易犯迷糊.之前我也写过两篇文章,这次加上详细的讲解,让大家更容易理解. 什么是宏任务.微任务? 1.首先要称得上是宏任务.微任务的,必须是一个回 ...
弄懂 JavaScript 执行机制，宏任务和微任务
本文的目的就是要保证你彻底弄懂javascript的执行机制. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出 ...
宏任务和微任务的详解
微任务可以在实时性和效率之间做一个有效的权衡. 从目前的情况来看,微任务已经被广泛地应用,基于微任务的技术有 MutationObserver.Promise 以及以 Promise 为基础开发出来的 ...
❤️一起谈一谈js中的宏任务和微任务！
前面面试的文章中我们说过一道关于宏任务和微任务的题: setTimeout(function(){console.log('1') });new Promise(function(resolve){c ...

宏任务与微任务的理解

宏任务与微任务的理解

相关试题

宏任务与微任务的理解相关推荐

最新文章

热门文章