zoukankan      html  css  js  c++  java
  • js 事件循环 & 宏任务 & 微任务 All In One

    js 事件循环 & 宏任务 & 微任务 All In One

    Node.js v10+ === Browser js

    async function async1() {
      console.log('async1 start');
      await async2();
      console.log('async1 end');
    }
    
    async function async2() {
      console.log('async2');
    }
    
    console.log('script start');
    
    setTimeout(() => {
      console.log('setTimeout');
    }, 0);
    
    async1();
    
    new Promise(function(resolve) {
      console.log('promise1');
      resolve();
    }).then(function () {
      console.log('promise2');
    });
    
    console.log('script end');
    
    
    /* 
      script start
    
      async1 start
      async2
      promise1
    
      script end
    
      async1 end
      promise2
    
      setTimeout
    
    按照顺序:1. 先依次执行代码中所有同步代码,2. 再执行微任务里面的同步代码,3. 然后依次执行微任务队列里面所有异步微任务,4. 最后执行宏任务队列里面的所有异步宏任务, 5. 直到本次事件循环结束,进入下一次的事件循环♻️;
    
    
    */
    
    

    js 事件循环

    步骤

    1. 先依次执行代码中所有同步代码;
    2. 再执行微任务里面的同步代码;
    3. 然后依次执行微任务队列里面所有异步微任务;
    4. 最后执行宏任务队列里面的所有异步宏任务;
    5. 直到本次事件循环结束,进入下一次的事件循环♻️;
    
    
    

    js 宏任务 macro task

    setTimeout/setInterval/setImmediate/requestAnimationFrame/IO/UI rendering/

    ??? AJAX 请求

    
    
    

    js 微任务 micro task

    Promise(.then/.catch/.finally/await)/queueMicrotask/process.nextTick/MutationObserver

    ??? fetch API

    微任务仅来自于我们的代码。
    它们通常是由 promise 创建的:对 .then/catch/finally 处理程序的执行会成为微任务。
    微任务也被用于 await 的“幕后”,因为它是 promise 处理的另一种形式。

    还有一个特殊的函数 queueMicrotask(func),它对 func 进行排队,以在微任务队列中执行。

    每个宏任务之后,引擎会立即执行微任务队列中的所有任务,然后再执行其他的宏任务,或渲染,或进行其他任何操作。

    
    
    

    queueMicrotask

    
    
    

    nextTick

    process.nextTick

    
    
    

    MutationObserver

    
    
    

    refs

    https://www.cnblogs.com/xgqfrms/p/14025969.html

    https://zh.javascript.info/event-loop

    https://stackoverflow.com/questions/25915634/difference-between-microtask-and-macrotask-within-an-event-loop-context



    ©xgqfrms 2012-2020

    www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

    原创文章,版权所有©️xgqfrms, 禁止转载 ️,侵权必究⚠️!


  • 相关阅读:
    算法竞赛入门经典习题2-3 韩信点兵
    ios入门之c语言篇——基本函数——5——素数判断
    ios入门之c语言篇——基本函数——4——数值交换函数
    144. Binary Tree Preorder Traversal
    143. Reorder List
    142. Linked List Cycle II
    139. Word Break
    138. Copy List with Random Pointer
    137. Single Number II
    135. Candy
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/15739073.html
Copyright © 2011-2022 走看看