美文网首页
javascript宏任务及微任务实例

javascript宏任务及微任务实例

作者: Hi小胡 | 来源:发表于2018-01-22 10:49 被阅读267次

    首先看一段代码,请写出输出结果:

    console.log("Start");
    
    setTimeout(function(){
      console.log("SetTimeout");
    });
    
    new Promise(function(resolve,reject){
      console.log("Promise");
      resolve();
    }).then(function(){
      console.log("Then");
    });
    
    console.log("End");
    

    输出结果:宏任务及微任务实例输出结果


    宏任务和微任务分类:

    • 宏任务(macrotask):主代码块,setTimeout,setInterval等(可以看到,事件队列中的每一个事件都是一个macrotask)
    • 微任务(microtask):Promise,process.nextTick等

    运行机制:

    1.执行一个宏任务(栈中没有就从事件队列中获取)
    2.执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
    3.宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
    4.当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
    5.渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)

    图解:

    上面代码运行过程:

    1. 主代码块:宏任务开始执行
    2. console.log("Start");:同步任务,主线程,立即执行
    3. 异步宏任务,等待主线程执行完毕
    setTimeout(function(){
      console.log("SetTimeout");
    });
    
    1. 同步任务,主线程,立即执行
    new Promise(function(resolve,reject){
      console.log("Promise");
      resolve();
    });
    
    1. 异步微任务,等待主线程执行完毕
    .then(function(){
      console.log("Then");
    });
    
    1. console.log("End");:同步任务,主线程,立即执行
    2. 主代码块执行完毕,判断是否有微任务,执行异步微任务then(),最后执行下一个宏任务setTimeout()

    相关文章

      网友评论

          本文标题:javascript宏任务及微任务实例

          本文链接:https://www.haomeiwen.com/subject/dhflaxtx.html