На этот раз четко объясните макро- и микрозадачи за десять минут.

JavaScript

зачем писать эту статью

  • Это вопрос, который любят задавать как крупные, так и мелкие заводские интервьюеры.
  • Многие интервьюеры и интервьюируемые не знают, что такое стандартный ответ
  • Разные статьи в интернете разного уровня.. многих ввели в заблуждение, в том числе и меня
  • Думаю, сегодня лучше потратить десять минут на то, чтобы ясно ему объяснить.

Официально начать

  • код сначала
    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 слов, я считаю, что они могут полностью решить ваши сомнения относительно микро- и макрозадач.
  • Если вы хотите понять глубже, не забудьте обратить внимание на [前端巅峰] Официальный аккаунт, в продолжении я напишу более подробные вещи, действительно "объясню глубокие вещи простым языком"
Категории