美文网首页
事件循环event loop 讲解

事件循环event loop 讲解

作者: zhang463291046 | 来源:发表于2020-09-26 14:49 被阅读0次

    以下内容是引用或者借鉴别人的,自己只是做个笔记,方便学习。理解错误的地方,欢迎评论。如有侵权,私聊我删除,未经允许,不准作为商业用途

    事件循环执行过程

    1、一开始整个脚本作为一个宏任务执行
    2、执行过程中同步代码直接执行,宏任务进入宏任务队列,微任务进入微任务队列
    3、当前宏任务执行完出队,读取微任务列表,有则依次执行,直到全部执行完
    4、执行浏览器 UI 线程的渲染工作
    5、检查是否有 Web Worker 任务,有则执行
    6、执行完本轮的宏任务,回到第 2 步,继续依此循环,直到宏任务和微任务队列都为空

    图解

    image.png

    例子动态图解

    代码一

    async function async1() {
      console.log('async1 start')
      await async2()
      console.log('async1 end')
    }
    async function async2() {
      console.log('async2')
    }
    console.log('script start')
    setTimeout(function () {
      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、整体 script 作为第一个宏任务进入主线程,代码自上而下执行,执行同步代码,输出 script start
    2、遇到 setTimeout,加入到宏任务队列
    3、执行 async1(),输出async1 start;然后遇到await async2(),await 实际上是让出线程的标志,首先执行 async2(),输出async2;把 async2() 后面的代码console.log('async1 end')加入微任务队列中,跳出整个 async 函数。(async 和 await 本身就是 promise+generator 的语法糖。所以 await 后面的代码是微任务。)
    4、继续执行,遇到 new Promise,输出promise1,把.then()之后的代码加入到微任务队列中
    5、继续往下执行,输出script end。接着读取微任务队列,输出async1 end,promise2,执行完本轮的宏任务。继续执行下一轮宏任务的代码,输出setTimeout
    

    代码二

    setTimeout(() => {
      setTimeout(() => {
        console.log(5);
      }, 0);
    
      new Promise(resolve => {
        console.log(2);
        for (let i = 0; i < 10; i++) {
          i == 9 && resolve();
        }
        console.log(3);
      }).then(() => {
        console.log(4);
      }).then(() => {
        console.log(44);
      });
    
      console.log(1);
    }, 0);
    
    setTimeout(() => {
      setTimeout(() => {
        console.log(15);
      }, 0);
    
      new Promise(resolve => {
        console.log(12);
        for (let i = 0; i < 10; i++) {
          i == 9 && resolve();
        }
        console.log(13);
      }).then(() => {
        console.log(14);
      });
    
      console.log(11);
    }, 0);
    

    结果

    2
    3
    1
    4
    44
    12
    13
    11
    14
    5
    15
    

    相关文章

      网友评论

          本文标题:事件循环event loop 讲解

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