JS 事件循环机制(event loop) 宏任务和微任务

概念：同步任务和异步任务

首先要知道javascript是单线程的语言,js任务需要排队按照顺序执行,如果一个任务消耗时间太长,后面的任务只能等着。消耗时间的任务称为异步任务，立即执行的任务称为同步任务。

这个过程是同步和异步任务分别进入不同的执行“场所”，同步进入主线程，异步进入Event Table并注册函数。当指定的事情完成时，Event Table会将这个函数移入任务队列(Event Queue)。主线程内的任务执行完毕为空，就去任务队列（Event Queue）读取对应的函数，进入主线程执行。

上述过程会不断重复，也就是常说的Event Loop（事件循环）

总结:

1）所有的同步任务都在主线程上执行，行成一个执行栈。
2）除了主线程之外，还存在一个任务列队，只要异步任务有了运行结果，就在任务列队中植入一个时间标记。
3）主线程完成所有任务(执行栈清空），就会读取任务列队，先执行微任务队列在执行宏任务队列。
4）重复上面三步。

只要主线程空了，就会读取任务列队，这就是js的运行机制，也被称为 event loop（事件循环）。

异步任务包括：宏任务和微任务：

1、宏任务
setTimeout
setInterval
I/O
事件
postMessage
setImmediate (node中的特性，浏览器已经废弃该API)
requestAnimationFrame
UI渲染
2、微任务
Promise.then
MutationObserver
process.nextTick (node中)

异步任务执行顺序：

1.主线程上宏任务、微任务执行顺序
执行顺序：主线程 >> 主线程上创建的微任务 >> 主线程上创建的宏任务

console.log('---start---');//第一轮主线程
 
setTimeout(() => {
    
    
  console.log('setTimeout');  // 将回调代码放入个宏任务队列，第二轮宏任务执行
}, 0);
 
new Promise((resolve, reject) => {
    
    
  console.log('---Promise第一轮微任务同步执行---');//第一轮微任务同步执行
  resolve()
}).then(()=>{
    
    
  console.log('Promise.then实例成功回调执行'); // 将回调代码放入微任务队列，第一轮宏任务执行完后立即执行
});
 
console.log('---end---');//第一轮主线程结束

2.宏任务中包含微任务

// 宏任务队列 1
setTimeout(() => {
    
    
  // 宏任务队列 2.1
  console.log('timer_1');
  setTimeout(() => {
    
    
    // 宏任务队列 3
    console.log('timer_3')
  }, 0)
  new Promise(resolve => {
    
    
    resolve()
    console.log('new promise')
  }).then(() => {
    
    
    // 微任务队列 1
    console.log('promise then')
  })
}, 0)
 
setTimeout(() => {
    
    
  // 宏任务队列 2.2
  console.log('timer_2')
}, 0)
console.log('========== Sync queue ==========')

3.异步任务中的函数调用
函数调用是同步，函数不调用不执行。

//请写出输出内容
   async function async1() {
    
    
       console.log('async1 start'); //2
       await async2(); 
     //  await async2（）会把后边的东西延后 (放到异步队列里面) 本身先执行 后面跟的是 转化为promise
       console.log('async1 end'); //6
   }
   async function async2() {
    
    
       console.log('async2');  //3
   }
   
   console.log('script start'); //1
   
   setTimeout(function() {
    
    
       console.log('setTimeout'); //8
   }, 0)
   
   async1();
   
   new Promise(function(resolve) {
    
    
       console.log('promise1'); //4
       resolve();
   }).then(function() {
    
    
       console.log('promise2'); //7
   });
   console.log('script end'); //5