浏览器的事件循环机制

• 浏览器事件循环事件循环机制

  • 浏览器事件循环机制：js任务分为同步任务和异步任务，同步任务会直接进入js主线程执行，形成一个执行栈，当前一个任务执行完，后一个任务才会执行。异步任务不直接进入主线程，它会先在Event Table中注册回调函数，然后进入任务队列中，等执行栈中为空后，任务队列中的函数就会进入主线程中执行。

    • 异步任务分为宏任务（script， setTimeout, setInterval）和微任务（process.nextTick （node.js中进程相关的对象）, Promise）。

    • 执行：先执行同步任务，然后执行微任务队列中的微任务，再执行宏任务，执行宏任务时，如果遇到微任务就会把微任务放入微任务队列中，遇到宏任务就会把宏任务放入宏任务队列中，当执行完这个宏任务后，会立即将微任务队列中的任务执行完，当微任务队列为空后，再执行下一个宏任务，如此往复。

      

    ​ 宏任务与微任务执行

    ​
    附上一道经典的有关宏任务和微任务的题目：

    {
      //主线程直接执行
    
      console.log('1');
    
      //丢到宏事件队列中
    
      setTimeout(function () {
    
        console.log('2');
    
        process.nextTick(function () {
    
          console.log('3');
    
        })
    
        new Promise(function (resolve) {
    
          console.log('4');
    
          resolve();
    
        }).then(function () {
    
          console.log('5')
    
        })
    
      })
    
      //微事件1
    
      process.nextTick(function () {
    
        console.log('6');
    
      })
    
      //主线程直接执行
    
      new Promise(function (resolve) {
    
        console.log('7');
    
        resolve();
    
      }).then(function () {
    
        //微事件2
    
        console.log('8')
    
      })
    
      //丢到宏事件队列中
    
      setTimeout(function () {
    
        console.log('9');
    
        process.nextTick(function () {
    
          console.log('10');
    
        })
    
        new Promise(function (resolve) {
    
          console.log('11');
    
          resolve();
    
        }).then(function () {
    
          console.log('12')
    
        })
    
      })
    }
    //输出结果：1 7 6 8 2 4 3 5 9 11 10 12
        ​