乐趣区

关于html5:这次十分钟把宏任务和微任务讲清楚

jiezi

为什么写这个文章

  • 这是一道大厂、小厂面试官都喜爱问的题目
  • 很多面试官和面试者也不晓得什么是标准答案
  • 网上各种文章档次不齐.. 误导过不少人, 包含我
  • 感觉还是明天花十分钟讲清楚他吧

正式开始

  • 先上代码
    function app() {setTimeout(() => {console.log("1-1");
        Promise.resolve().then(() => {console.log("2-1");
        });
      });
      console.log("1-2");
      Promise.resolve().then(() => {console.log("1-3");
        setTimeout(() => {console.log("3-1");
        });
      });
    }
    app();
  • 输入后果：
1-2
1-3
1-1
2-1
3-1

开始剖析

  • 面试官特地喜爱问：你讲讲什么是微工作和宏工作

大部分面试官其实本人也不懂什么是微工作和宏工作, 不信下次你们反诘一下

所谓微工作和宏工作

  • 宏工作: 常见的定时器, 用户交互事件等等.（宏工作就是特定的这些个工作, 没什么非凡含意）
  • 微工作:Promise相干工作,MutationObserver等（一样，只是一种称说而已！！！）

到底先执行微工作还是宏工作

  • 先有鸡还是先有蛋? 到底是先有宏工作还是微工作啊?

第一个准则

  • 万物皆从全局上下文筹备退出，全局的同步代码运行完结的这个机会开始
  • 例如咱们方才这段代码：
   function app() {setTimeout(() => {console.log("1-1");
        Promise.resolve().then(() => {console.log("2-1");
        });
      });
      console.log("1-2");
      Promise.resolve().then(() => {console.log("1-3");
        setTimeout(() => {console.log("3-1");
        });
      });
    }
    app();
  • 当执行完了 console.log("1-2"); 的时候，意味着全局的上下文马上要退出了, 因为此时全局的同步代码都执行完了, 剩下的都是异步代码

第二个准则

  • 同一层级下 ( 不了解层级，能够先不论，前面会讲), 微工作永远比宏工作先执行
  • 即 Promise.then 比 setTimeout 先执行
  • 所以先打印1-3, 再打印1-1

第三个准则

  • 每个宏工作, 都独自关联了一个微工作队列
  • 我用刚买的黑板画了一张图, 大家就晓得什么是层级了

  • 每个层级的宏工作, 都对应了他们的微工作队列, 微工作队列遵循先进先出的准则, 当全局同步代码执行结束后, 就开始执行第一层的工作。同层级的微工作永远先于宏工作执行, 并且会在以后层级宏工作完结前全副执行结束

怎么分辨层级？

  • 属于同一个维度的代码, 例如上面的 func1 和 func2 就属于同层级工作
setTimeout(func1)...
Promise.resolve().then(func2)...
  • 上面这种 fn1 和 fn2 就不属于同一个层级的, 因为 fn2 属于外部这个 setTimeout 的微工作队列, 而 fn1 属于内部 setTimeout 的微工作队列
setTimeout(()=>{Promise.resolve().then(fn1)
setTimeout(()=>{Promise.resolve().then(fn2)  
})})

划重点: 每个宏工作对应一个独自的微工作队列

遇到面试题

  • 就依照我的套路, 从全局上下文退出前（全局的同步代码执行结束后）, 开始收集以后层级的微工作和宏工作, 而后先清空微工作队列, 再执行宏工作. 如果这期间遇到宏工作 / 微工作, 就像我这样画个图, 把他们塞进对应的层级里即可

写在最初

  • 简略的 1000 字, 置信能彻底解决你的微工作和宏工作纳闷
  • 如果你想了解得更深，记得关注下公众号, 后续会写一些更深刻的货色, 真正的“深入浅出”
退出移动版