Why write this article

  • This is a big factory, small factory interviewers like to ask the question
  • Many interviewers and interviewees don’t know what the standard answer is
  • Various articles on the Internet have different levels. Misled a lot of people, including me
  • I thought I’d spend ten minutes talking about him today

The official start of the

  • On the first code
    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();
Copy the code
  • Output results:
One, two, three, one, two, three, oneCopy the code

To analyze

  • Interviewers like to ask: What are microtasks and macro tasks

Most interviewers don’t know what microtasks and macrotasks are

Microtasks and macro tasks

  • Macro tasks: common timers, user interaction events, etc. (macro tasks are specific tasks, with no special meaning)
  • Micro tasks:PromiseRelated tasks,MutationObserverAnd so on.It's just a form of address!!)

Whether to perform the microtask or macro task first

  • Which came first, the chicken or the egg? Is there a macro task or a micro task first?

First principle

  • Everything starts when the global context is ready to exit and the global synchronization code is finished
  • For example, here’s our code:
   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();
Copy the code
  • When the execution is doneconsole.log("1-2");“Means that the global context is about to exit, because the global synchronous code has been executed and the rest is asynchronous code

Second principle

  • At the same level (If you don't understand hierarchy, you can forget about it. We'll talk about it later), microtasks are always executed before macro tasks
  • That is, promise. then executes before setTimeout
  • So print first1-3And then print1-1

Third principle

  • Each macro task is associated with a separate microtask queue
  • I drew a picture with the blackboard I just bought, so you know what hierarchy is, right

  • Each level of macro task corresponds to its microtask queue. The microtask queue follows a first-in, first-out principle. When the globally synchronized code is executed, the first level task is executed. Microtasks at the same level are always executed before the macro task, and will all be executed before the macro task at the current level ends

How to distinguish hierarchy?

  • Code that belongs to the same dimension, such as the followingFunc1 and func2It’s the same level of task
setTimeout(func1)...
Promise.resolve().then(func2)...
Copy the code
  • Below this kind ofFn1 and fn2It doesn’t belong to the same hierarchy, because fn2 belongs to the inner onesetTimeoutOf the microtask queue, andfn1Belongs to the externalsetTimeoutOf the microtask queue
setTimeout(()=>{
Promise.resolve().then(fn1)
setTimeout(()=>{
Promise.resolve().then(fn2)  
})})
Copy the code

Highlight: Each macro task corresponds to a separate queue of microtasks

Encounter interview questions

  • Just follow my routine, before exiting from the global context (after the global synchronization code is executed), start collecting the current level of microtasks and macro tasks, and then empty the queue of microtasks before executing the macro task. If you encounter macro/microtasks, just draw a diagram like I did and cram them into the corresponding hierarchy

Write in the last

  • Simple 1000 words, I believe you can thoroughly solve your micro task and macro task doubts
  • If you want to understand more, remember to pay attention [The front-end peak] the public account, the follow-up will write some more in-depth things, the real “simple”