前言

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

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

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

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

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

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

首先让我们看一下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里保证方法在对象完成构造后但是在数据交互发生前调用。

总结

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

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

最后放上一张镇楼图

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

js的异步与宏任务(marcroTask)和微任务(microTask)
咱们先看道面试题让写出console.log的打印顺序 console.log(100);setTimeout(()=>{console.log(200); })setTimeout(()=& ...
精学JS：宏任务微任务的运行机制
首先分析宏任务和微任务的运行机制,并针对日常开发中遇到的各种宏任务&微任务的方法,结合一些例子来看看代码运行的顺序逻辑,把这部分知识点重新归纳和梳理. 在日常开发中,例如 setTimeo ...
js单线程，事件循环，微任务宏任务
什么是宏任务和微任务宏任务包括:setTimeout setInterval Ajax DOM事件微任务:Promise async/await 微任务比宏任务的执行时间要早异步和单线程异步和 ...
Promise - （三）异步宏任务和异步微任务
浏览器五大核心线程: 1.GUI渲染线程 2.JS引擎线程 3.事件触发线程 4.定时触发器线程 5.异步http请求线程其中JS代码的解释执行是由JS引擎线程负责的,我们通常将该线程叫做JS主线程 ...
辉太郎看前端(js异步宏任务和微任务)
前言宏任务:setTimeout,setInterval,Ajax,DOM事件微任务:Promise,async/await. 优先级:微任务执行要比宏任务要早. 注: 同步任务会和微任务按照出场 ...
js的宏任务和微任务
js是单线程的,同一时刻只能干一件事异步代码会放到任务队列任务队列分为宏任务和微任务微任务优先于宏任务执行 promise放在微任务队列中 setTimeout(() => {consol ...
JS面试——宏任务与微任务
JavaScript的宏任务与微任务 1.问题的由来 2.JavaScript的宏任务与微任务 2.1promise的使用方法 2.2async与await的使用方法 3.面试题实战分析--程序执行顺 ...
微博转发话题js代码
function openqq(){var _url=encodeURIComponent(location.href);var pic = '';var _pic=encodeURI(pic);va ...
JS之宏任务与微任务
文章目录前话宏任务和微任务包括哪些执行流程图易错例题引例前话任务队列中的异步任务分为:宏任务和微任务宏任务和微任务都是异步任务,都在任务队列中,但是它们在不同的队列中 *重点:在准 ...

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

文章目录

前言