宏队列和微队列、event-loop事件循环

水深无声 2021-07-24 12:36 445阅读 0赞

执行顺序:
    	javaScript的单线程机制,会执行完所有同步任务,再去执行队列中的任务
    	相同类型的任务,从上往下执行
    	不同类型:微队列任务优先级高于宏队列任务
    		(1)会先执行完所有微队列任务,再去执行宏队列任务
    		(2)每次准备取出执行下一个宏队列任务之前,都要将微队列中的任务全部取出来执行
    
    宏队列任务:dom回调、ajax回调、定时器回调、dom渲染等,是由浏览器规定的
    微队列任务:Promise回调、mutationObserver回调、await 后面的函数是同步的,下方的剩余代码是微任务、process.nextTick等,是由es6规定的
    	其中:
    		微队列中的微队列会被放进已存在的微队列栈的最后,而非在其父微队列任务其后执行,具体看第二个示例代码
    		Promise中的方法是同步调用的,.then的回调才是异步
    
    event-loop事件循环:
    	同步代码放到call stack中执行,然后执行微任务,再进行dom渲染,宏任务会等待到调用时移动到call queue中,若call stack空掉了,event-loop开始工作,轮询查找call queue,若有则移动到call stack,然后继续轮询

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

//执行结果:3-4-1-2-h1-3-h2
    setTimeout(() => { 
      console.log('h1');
      Promise.resolve(3).then((res) => { 
        console.log(res);
      })
    }, 0)
    setTimeout(() => { 
      console.log('h2');
    }, 0)
    new Promise(() => { 
      console.log(3);
    })
    Promise.resolve(1).then((res) => { 
      
      console.log(res);
    })
    Promise.resolve(2).then((res) => { 
      console.log(res);
    })
    
    console.log(4);

执行结果:1-7-2-3-8-4-6-5-0  
先执行同步任务1,然后将之后的.then中的方法参数放进微队列  
\->然后执行同步任务7,将7后的.then方法参数放进微队列  
\->执行1后放的微队列->输出同步结果2、3->将3之后.then的方法参数放进微队列  
\->执行7后的微任务,输出8  
\->将4回调放进微队列,因为5依赖4的结果,所以先往后执行,将6的回调参数放进微队列  
\->然后再将5放进微队列->最后执行宏队列0  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][20210328155427170.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210328140553156.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/ec843b6e3b214536a76b6da6c8160be8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: /images/20210724/149a53d082dc42d7a093898e5bc53434.png
[20210328155427170.png]: /images/20210724/bcfffa8bf7554bb8b8e5c47e3339549a.png