JS异步任务、微任务、宏任务

前言

关于Js的异步处理以及宏任务、微任务。
首先我们要先明白JS为什么是单线程的执行机制？Js是用于跟Client交互的一种浏览器端脚本语言，首先肯定要操作dom结构，如果是多线程的话，会发生什么？ A线程想要操作这个DOM变红色，然后呢B线程来了，他想要将这个DOM变为蓝色。浏览器就二丈和尚摸不着头脑了。
所以这也是单线程的原因。当然，现在也支持多线程，我们不过多深究。

一、异步任务是什么？

由于Js执行机制是单线程的，就是同一时间只能做一件事吗，举个例子，我能一遍洗澡，一边煮水。水煮好了，我洗澡也洗完了。但是JS不行，他会等水煮好了，再去洗澡，又由于单线程原因，所以异步任务出来了。
异步任务使得JS更好的处理异步，当我们去请求一个接口的时候，我们可以把他放到异步队列，当期请求完成后，我们再去对其操作。

二、宏任务、微任务

1、什么是宏任务？

要明确一点宏任务和微任务都属于异步任务。
常见的宏任务有（script、setTimeout、setInterval、postMessage、MessageChannel、setImmediate(Node.js 环境），其中粗体对于搬砖已经够用。

console.log('start')
setTimeout(function(){console.log('我是第二个宏任务');
});
console.log('end');
//输出结果：start、end、我是第二个宏任务

解释：上面我们提到过 script、setTimeout 是宏任务，JS一上来首先执行宏任务，也就是我们最熟悉的Script 标签内容，所以输出 start、遇到setTimeout 是第二个宏任务，先放到异步队列。继续执console.log(‘end’);
也就是输出 end 当第一个宏任务执行完成后，再去执行settimeout（当然应该先判断存不存在微任务，此处暂且不讨论。下面会引出）

2.什么是微任务？

常见的微任务有（微任务：Promise.then、Object.observe、MutationObserver、process.nextTick(Node.js 环境)）
我们来讨论Promise
Promise传送门

console.log('start');
setTimeout(function(){console.log('我是第二个宏任务');
});
new Promise(function(resolve){          console.log('我是promise');resolve();
}).then(function(){         console.log('我是promise里的第一个then');
})
console.log('end');
// 输出结果：1、start 2、我是Promise23、4、end
//5、我是Promise里的第一个then 6、我是第二个宏任务

运行解释：当JS执行时，碰到的第一个宏任务是Script，执行，输出里面的start、 settimeout是第二个宏任务。放到异步队列，不执行，输出第一个值 1、start，
碰到promise主函数里面的是直接输出，即输出 2、我是promise， then里面的是微任务，放到微任务队列。往下运行，遇到输出end。输出 end，主执行栈（也就是第一个宏任务执行完毕）不要着急，宏任务执行完了不是要执行第二个宏任务，要看看有没有微任务，一看，微任务里还有个 ‘ console.log(‘我是promise里的第一个then’);’等待执行，那肯定要运行这句代码啊。所以输出 我是promise里的第一个then 一看微任务没了，主执行栈也没东西了，就去问。宏任务有没有等待执行的，问了一下，结果 ‘console.log(‘我是第二个宏任务’);‘说话了，我还没有输出，既输出我是第二个宏任务

3.为什么有了宏任务还要有微任务？

是为了给紧急任务一个插队执行的机会，举个例子。我正在排队做核酸检测，做完后忽然我忘了领取核酸检测完成贴。那按照宏任务的思维，我们只能排队到最后重新领取，那这样是不是很不友好，所以微任务出来了，给了我们一个紧急插队执行的机会，宏任务（做核酸），微任务（做完核酸忘记领取贴纸，还要运行我的事情）。
第一次写，不对的地方请指正。

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

谈JS 异步任务，微任务，宏任务相关推荐

JS同步任务微任务宏任务
文章目录概念待执行任务种类同步任务异步任务微任务宏任务执行优先级概念在JS运行机制当中,JavaScript是单线程的编程语言,简单的讲就是将JavaScript比作一个单项的管道, ...
前端常见面试题之----js单线程，微任务宏任务
js单线程,微任务宏任务前言一.什么是单线程? 二.为什么JS是单线程? 三.任务队列 1. 什么是任务队列 2. 什么是微任务宏任务四.常见面试题例子总结前言他来了他来了,前端必问题之一 ...
❤️一起谈一谈js中的宏任务和微任务！
前面面试的文章中我们说过一道关于宏任务和微任务的题: setTimeout(function(){console.log('1') });new Promise(function(resolve){c ...
同步、异步事件循环（宏任务、微任务「大厂真题解析」）
引言:Js 是单线程,多任务执行时会触发进程阻塞问题.所以,Js 有两种任务的执行模式:同步和异步. 同步任务:运行在主线程,先于异步任务执行异步任务:分为宏任务和微任务,微任务先于宏任务执行微任 ...
js 微任务宏任务的执行顺序解释
js 微任务宏任务的执行顺序解释 js 是单线程执行的,js中的任务按顺序一个一个的执行,但是一个任务耗时太长,那么后面的任务就需要等待,为了解决这种情况,将任务分为了同步任务和异步任务,而异步任务 ...
js单线程，事件循环，微任务宏任务
什么是宏任务和微任务宏任务包括:setTimeout setInterval Ajax DOM事件微任务:Promise async/await 微任务比宏任务的执行时间要早异步和单线程异步和 ...
JS基础知识三：宏任务和微任务
宏任务和微任务一.宏队列,macrotask,也叫tasks. 一些异步任务的回调会依次进入macro task queue,等待后续被调用 setTimeout setInterval setIm ...
浅谈js中的异步编程
转载自品略图书馆 http://www.pinlue.com/article/2020/07/0412/3110968788347.html JS异步编程模型在理解js异步编程时, 我们先再心中想一 ...
浅谈JS中常见的问题（三）
往期文章目录浅谈JS中常见的问题(一) 浅谈JS中常见的问题(二) JS知识总结往期文章目录前言 11. 同步和异步的区别 12. JS 判断变量类型的几种方法 13. 如何阻止事件冒泡与默认事 ...

谈JS 异步任务，微任务，宏任务