微任务和宏任务的区别

2021-07-20 本文已影响0人李小白呀

微任务和宏任务

宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。

2.微任务：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。

宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。

js执行顺序，（先执行宏任务列，微任务队列）

运行机制

在执行栈中执行一个宏任务。
执行过程中遇到微任务，将微任务添加到微任务队列中。
当前宏任务执行完毕，立即执行微任务队列中的任务。
当前微任务队列中的任务执行完毕，检查渲染，GUI线程接管渲染。
渲染完毕后，js线程接管，开启下一次事件循环，执行下一次宏任务（事件队列中取）。

微任务：process、nextTick、Mutation、Observer、Promise.then 、catch、finally

宏任务：I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame

代码示例

1.正常循环输出

 for(var i=0;i<10;i++){
   console.log(i);
 }

#0 1 2 3 4 5 6 7 8 9

2.循环里面使用了var，发生了变量提升，相当于这个i是定义在for循环外部的，所以10次循环结束后，定时器执行输出10次外部的i，也就是10个10

for(var i=0;i<10;i++){
      console.log(1,i);
      setTimeout(function(){
        console.log(2,i);
     },10)
  }

image.png

3.使用块级变量声明let代替var，setTimeOut中每次都有生成一个新的函数，这个函数会拷贝要使用的变量到它的块级作用域里，也就是i，也就是说，每个函数都有一个自己的i，因此会按顺序输出1到10。

for(let i=0;i<10;i++){
      setTimeout(function(){
        console.log(i);
      },10)
  }

#0 1 2 3 4 5 6 7 8 9

闭包：内部的setTimeOut里的函数因为作用域继承，还可以访问块级作用域的变量i，也可以访问上一层setTimeOut里函数定义的变量），此时访问的就是闭包

    for (let i = 0; i < 10; i++) {
      setTimeout(function () {
        console.log(1, i);
        var k=i+3
        setTimeout(function () {//闭包
          console.log(2, i);
          console.log('k', k);
        }, 10)
      }, 10)
    }

   #i : 0 1 2 3 4 5 6 7 8 9
   #k: 3 4 5 6 7 8 9 10 11 12

4.拓展（先执行宏任务列，微任务队列）

    setTimeout(function () {
      console.log(1);
    }, 0)
    new Promise(function (resolve, reject) {
      resolve('成功')
      console.log(2);
    }).then(
      console.log(3)
    )
    console.log(4);

    #2 3 4 1

整个script是个宏任务它下边的代码都是子任务，这些任务分为宏任务和微任务，其中还可以细分为同步和异步，promise是同步任务队列，它的回调 .then . catch .finally 是异步队列。先执行宏任务再看本次宏任务下是否有微任务，有就执行完毕再开启下一轮的宏任务

    setTimeout(function () {
      console.log(1);
    }, 0)
    new Promise(function (resolve, reject) {
      resolve('成功')
      console.log(2);
    }).then(() => {
      console.log(3)
    })
    console.log(4);

    #2 4 3 1

 console.log(0);
    setTimeout(function () {
      console.log(1);
    }, 0)
    new Promise(function (resolve, reject) {
      resolve('成功')
      console.log(2);
    }).then(() => {
      console.log(3)
    }).then(() => {
      console.log(4)
    })
    console.log(5);

   #0 2 5 3 4 1

微任务和宏任务的区别