宏任务与微任务和事件循环

最新推荐文章于 2024-06-11 11:53:52 发布

烟雨浥轻尘

最新推荐文章于 2024-06-11 11:53:52 发布

阅读量1.3k

点赞数 3

本文链接：https://blog.csdn.net/qq_41430522/article/details/114274124

版权

宏任务与微任务都有哪些可以看这篇 https://www.jianshu.com/p/443e8ece33a6

首先

// js引擎一直再等待传入的js代码来执行

// 而它执行的机制是event loop事件循环

// 指的是

// 1.执行栈选择最先进入队列的宏任务（一般都是script）,把宏任务里的同步代码执行完

// 2.再把相应的微任务执行完

// 3.在浏览器的话,前面的同步代码和微任务要是有什么dom操作可能渲染下页面

// 4.其实此时是继续往下,看看同层还有没有同级的宏任务,也一并执行上面1 2 3步,等这一层结束,才又从这一层第一个宏任务开始往下循环 1 2 3步,每层都是如此,每次都是把一层的

// 宏任务都这样执行完,一层层往下,而不是说一个宏任务递归执行完才开始去让第二个同级宏任务也同样递归执行,不是这样的

感觉我这里说的有点不清晰，

如果一个宏任务里面有多个宏任务，这多个宏任务里面，没有又有多个宏任务，是不是从顶上向下，类似一颗发散的多叉树，

我要说的是，它不是抓着其中一个分支一直执行到底，再执行第二个分支，而是一层一层的执行完所有的宏任务，懂我意思了吗

0 这层执行完再执行下一层，每层都如此

0 0 0 0 0 这层执行完再执行下一层，每层都如此

0 0 0 0 0 0 0 0 0 0 00 0 00 0 0 0 0 0 0 这层执行完再执行下一层，每层都如此

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // js引擎一直再等待传入的js代码来执行
    // 而它执行的机制是event loop事件循环

    // 指的是
    // 1.执行栈选择最先进入队列的宏任务（一般都是script）,把宏任务里的同步代码执行完
    // 2.再把相应的微任务执行完
    // 3.在浏览器的话,前面的同步代码和微任务要是有什么dom操作可能渲染下页面
    // 4.开始下一轮tic,执行上个宏任务里的异步代码,其实就是相当于第二轮的宏任务了,然后又是一样的程序,又把这个第二轮的宏任务里的同步代码执行完

    console.log('script宏任务1开始')
    setTimeout(() => {
      console.log('settimeout1宏任务开始')
      setTimeout(() => {
        console.log('settimeout2宏任务')
        setTimeout(() => {
          console.log('settimeout5宏任务')
        }, 0);
      }, 0);
      new Promise((resolve, reject) => {
        console.log(3)
        resolve()//此处如果不写resolve,那么promise的状态就会一直处于等待,只有执行了resolve才会变成resolve状态,.then才会执行
      }).then(() => {
        console.log(4)
      }).catch(() => {
      })
      console.log('settimeout1宏任务结束')
    }, 0);


    // 如果一个宏任务里有过个宏任务,那么就会从第一个宏任务开始事件循环

    setTimeout(() => {
      console.log('settimeout3宏任务开始')
      setTimeout(() => {
        console.log('settimeout4宏任务')
        setTimeout(() => {
          console.log('settimeout6宏任务')
        }, 0);
      }, 0);
      new Promise((resolve, reject) => {
        console.log(5)
        resolve()//此处如果不写resolve,那么promise的状态就会一直处于等待,只有执行了resolve才会变成resolve状态,.then才会执行
      }).then(() => {
        console.log(6)
      }).catch(() => {
      })
      console.log('settimeout3宏任务结束')
    }, 0);

    new Promise((resolve, reject) => {
      console.log(1)
      resolve()//此处如果不写resolve,那么promise的状态就会一直处于等待,只有执行了resolve才会变成resolve状态,.then才会执行
    }).then(() => {
      console.log(2)
    }).catch(() => {
    })
    console.log('script宏任务1结束')
    // 执行宏任务的所有同步代码

    // script宏任务开始
    // 1
    // script宏任务结束

    // 把微任务清空

    // 2

    // 执行宏任务里的异步代码,也就是上一个宏任务里的宏任务,也就是执行这个宏任务里的所有同步代码,又开始这一个宏任务的事件循环

    // settimeout1宏任务开始
    // 3
    // settimeout1宏任务结束

    // 把微任务清空

    // 4

    // 在上一个宏任务那一层,看看还有没有异步代码,有就去执行,其实是一层一层的执行宏任务,并不是说会先死命往一个宏任务里执行完,看执行结果便知
    // script里的第二个异步宏任务,也就是上一个宏任务里的继续往下执行下面的宏任务,也就是执行这个宏任务里的所有同步代码,又开始这一个宏任务的事件循环

    // settimeout3宏任务开始
    // 5
    // settimeout3宏任务结束

    // 清空微任务

    // 6

    // 在上一个宏任务那一层,看看还有没有异步代码,有就去执行
    // settimeout2宏任务

    // 在上一个宏任务那一层,看看还有没有异步代码,有就去执行

    // settimeout4宏任务
  </script>
  <script>
    console.log('script宏任务2开始')
    console.log('script宏任务2结束')
  </script>
  <!-- <script src="./test2.js"></script> -->
</body>

</html>

可以看到执行结果确实如预测的一般,所以这就是每轮都一样的宏任务.微任务的事件循环

烟雨浥轻尘

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
宏任务与微任务和事件循环

首先//js引擎一直再等待传入的js代码来执行//而它执行的机制是eventloop事件循环//指的是//1.执行栈选择最先进入队列的宏任务（一般都是script）,把宏任务里的同步代码执行完//2.再把相应的微任务执行完//3.在浏览器的话,前面的同步代码和微任务要是有什么dom操作可能渲染下页面//4.开始下一轮tic,执行上个宏任务里的异步代码,其实就是相当于第二轮的宏任务了,然后又是一样的程序...
复制链接

扫一扫