zoukankan      html  css  js  c++  java
  • 微任务、宏任务

    首先,JavaScript是一个单线程的脚本语言。
    所以就是说在一行代码执行的过程中,必然不会存在同时执行的另一行代码,就像使用alert()以后进行疯狂console.log,如果没有关闭弹框,控制台是不会显示出一条log信息的。
    亦或者有些代码执行了大量计算,比方说在前端暴力破解密码之类的鬼操作,这就会导致后续代码一直在等待,页面处于假死状态,因为前边的代码并没有执行完。

    所以如果全部代码都是同步执行的,这会引发很严重的问题,比方说我们要从远端获取一些数据,难道要一直循环代码去判断是否拿到了返回结果么?就像去饭店点餐,肯定不能说点完了以后就去后厨催着人炒菜的,会被揍的。
    于是就有了异步事件的概念,注册一个回调函数,比如说发一个网络请求,我们告诉主程序等到接收到数据后通知我,然后我们就可以去做其他的事情了。
    然后在异步完成后,会通知到我们,但是此时可能程序正在做其他的事情,所以即使异步完成了也需要在一旁等待,等到程序空闲下来才有时间去看哪些异步已经完成了,可以去执行。

    宿主环境提供的叫宏任务,由语言标准提供的叫微任务,这是算比较标准也算比较好记忆的区分宏任务和微任务了,目前我们常见的两种宿主环境有浏览器和node。

    微任务与宏任务的区别

    微任务:process.nextTick、MutationObserver、Promise.then catch finally

    宏任务:I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame

    这个就像去银行办业务一样,先要取号进行排号。
    一般上边都会印着类似:“您的号码为XX,前边还有XX人。”之类的字样。

    因为柜员同时职能处理一个来办理业务的客户,这时每一个来办理业务的人就可以认为是银行柜员的一个宏任务来存在的,当柜员处理完当前客户的问题以后,选择接待下一位,广播报号,也就是下一个宏任务的开始。
    所以多个宏任务合在一起就可以认为说有一个任务队列在这,里边是当前银行中所有排号的客户。
    任务队列中的都是已经完成的异步操作,而不是说注册一个异步任务就会被放在这个任务队列中,就像在银行中排号,如果叫到你的时候你不在,那么你当前的号牌就作废了,柜员会选择直接跳过进行下一个客户的业务处理,等你回来以后还需要重新取号

    而且一个宏任务在执行的过程中,是可以添加一些微任务的,就像在柜台办理业务,你前边的一位老大爷可能在存款,在存款这个业务办理完以后,柜员会问老大爷还有没有其他需要办理的业务,这时老大爷想了一下:“最近P2P爆雷有点儿多,是不是要选择稳一些的理财呢”,然后告诉柜员说,要办一些理财的业务,这时候柜员肯定不能告诉老大爷说:“您再上后边取个号去,重新排队”。
    所以本来快轮到你来办理业务,会因为老大爷临时添加的“理财业务”而往后推。
    也许老大爷在办完理财以后还想 再办一个信用卡?或者 再买点儿纪念币
    无论是什么需求,只要是柜员能够帮她办理的,都会在处理你的业务之前来做这些事情,这些都可以认为是微任务。

    这就说明:你大爷永远是你大爷
    在当前的微任务没有执行完成时,是不会执行下一个宏任务的。

        setTimeout(_ => {
          console.log(4)
        },2000)
        new Promise(resolve => {
          resolve(1111)
          console.log(1)
        }).then((res) => {
          console.log(res);
          console.log(3)
        })
        console.log(2)

    所有会进入的异步都是指的事件回调中的那部分代码
    也就是说new Promise在实例化的过程中所执行的代码都是同步进行的,而then中注册的回调才是异步执行的。
    在同步代码执行完成后才回去检查是否有异步任务完成,并执行对应的回调,而微任务又会在宏任务之前执行。
    所以就得到了上述的输出结论1、2、3、4

  • 相关阅读:
    Bootstrap 插件收集
    target和currentTarget
    微信小程序
    flex
    vue中使用icon和打包
    rem的使用
    vue中使用sass和compass
    vue父子组件传递参数
    weex
    常用软件&&网址
  • 原文地址:https://www.cnblogs.com/zwhbk/p/13259459.html
Copyright © 2011-2022 走看看