JavaScript 运行机制 宏任务微任务

1.关于javascript

javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。

2.浏览器中的eventLoop

既然js是单线程，那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。那么问题来了，假如我们想浏览新闻，但是新闻包含的超清图片加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？因此聪明的程序员将任务分为两类：

同步任务
异步任务

当我们打开网站时，网页的渲染过程就是一大堆同步任务，比如页面骨架和页面元素的渲染。而像加载图片音乐之类占用资源大耗时久的任务，就是异步任务。关于这部分有严格的文字定义，但本文的目的是用最小的学习成本彻底弄懂执行机制，所以我们用导图来说明：

导图要表达的内容用文字来表述的话：

同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
当指定的事情完成时，Event Table会将这个函数移入Event Queue。
主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
上述过程会不断重复，也就是常说的Event Loop(事件循环)。

我们不禁要问了，那怎么知道主线程执行栈为空啊？js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。
说了这么多文字，不如直接一段代码更直白：

let data = [];
$.ajax({
    url:www.javascript.com,
    data:data,
    success:() => {
        console.log('发送成功!');
    }
})
console.log('代码执行结束');

复制代码上面是一段简易的ajax请求代码：

ajax进入Event Table，注册回调函数success。
执行console.log(‘代码执行结束’)。
ajax事件完成，回调函数success进入Event Queue。
主线程从Event Queue读取回调函数success并执行。

3.又爱又恨的setTimeout

我们知道setTimeout这个函数，是经过指定时间后，把要执行的任务(本例中为task())加入到Event Queue中，又因为是单线程任务要一个一个执行，如果前面的任务需要的时间太久，那么只能等着，导致真正的延迟时间远远大于3秒。
我们还经常遇到setTimeout(fn,0)这样的代码，0秒后执行又是什么意思呢？是不是可以立即执行呢？
答案是不会的，setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，意思就是不用再等多少秒了，只要主线程执行栈内的同步任务全部执行完成，栈为空就马上执行。

关于setTimeout要补充的是，即便主线程为空，0毫秒实际上也是达不到的。根据HTML的标准，最低是4毫秒。有兴趣的同学可以自行了解。

4.又恨又爱的setInterval

上面说完了setTimeout，当然不能错过它的孪生兄弟setInterval。他俩差不多，只不过后者是循环的执行。对于执行顺序来说，setInterval会每隔指定的时间将注册的函数置入Event Queue，如果前面的任务耗时太久，那么同样需要等待。
唯一需要注意的一点是，对于setInterval(fn,ms)来说，我们已经知道不是每过ms秒会执行一次fn，而是每过ms秒，会有fn进入Event Queue。一旦setInterval的回调函数fn执行时间超过了延迟时间ms，那么就完全看不出来有时间间隔了。这句话请读者仔细品味。

5.Promise与process.nextTick(callback)

process.nextTick(callback)类似node.js版的"setTimeout"，在事件循环的下一次循环中调用 callback 回调函数

进入正题： 宏任务微任务

• macro-task(宏任务)：包括整体代码 script，setTimeout，setInterval，I/O, setImmediate, requestAnimationFrame
• micro-task(微任务)：Promise，process.nextTick

不同类型的任务会进入对应的Event Queue，比如setTimeout和setInterval会进入相同的Event Queue。
事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。

	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')
	    })
	})
	process.nextTick(function() {
	    console.log('6');
	})
	new Promise(function(resolve) {
	    console.log('7');
	    resolve();
	}).then(function() {
	    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

请注意，node环境下的事件监听依赖libuv与前端环境不完全相同，输出顺序可能会有误差

测试题

	setTimeout(() => {
      console.log('timeout')
    }, 0);
    const promise = new Promise(resolve => {
      console.log('promise init')
      resolve(1)
      console.log('promise end')
    })
    promise.then(res => {
      console.log('promise result:', res)
    })
    // promise init  promise end  promise result:1  timeout```

宏微任务交替执行

	setTimeout(() => {
      console.log('timeout1');
      Promise.resolve().then(() => {
        console.log('promise1')
      })
    }, 0);
    Promise.resolve().then(() => {
      console.log('promise2')
      setTimeout(() => {
        console.log('timeout2');
      }, 0);
    })
    // promise2 timeout1 promise1 timeout2

async await 拆解

// 如果await 后是一个简单类型，则进行Promise包裹
// 如果await 后面跟的是一个thenable对象，则不包裹（chrome的优化）
// resolve处理thenable也会再包裹一层promise
// 遇到thenable 会使用 递归使用promise.then 调用，直到reaolve返回值是一个基础类型
	async function fn(params) {
      return ({
        then(r) {
          r({
            then(resolve) {
              resolve(1)
            }
          })
        }
      })
    }
    fn().then(res => console.log(res))
    // 1

async await 顺序判断

	async function async1(params) {
      console.log('async1 start')
      await async2()
      console.log('async1 end')
      // new Promise((resolve) => {
      //   console.log('async2')
      //    resolve()
      // }).then(() => {
      //   console.log('async1 end')
      // })
    }
    async function async2(params) {
      console.log('async2')
    }
    async1()
    console.log('script')
    /*
      async1 start
      async2
      script
      async1 end
    */

如果promise每天resolve 或reject

	async function async1(params) {
      console.log('async1 start')
      await new Promise(resolve => {
        console.log('promise1')
      })
      console.log('async1 success')
      return 'async1 end'
    }
    console.log('script start')
    async1().then(res => console.log(res))
    console.log('script end')

    /*
      script start
      async1 start
      promise1
      script end
    */

某大厂真实面试题

	async function async1(params) {
      console.log('async1 start')
      await async2()
      console.log('async1 end')
    }
    async function async2(params) {
      console.log('async2')
    }
    console.log('script start')
    setTimeout(() => {
      console.log('setTimeout')
    }, 0);
    async1();
    new Promise(function (resolve) {
      console.log('promise1')
      resolve()
    }).then(function () {
      console.log('promise2')
    }).then(function () {
      console.log('promise3')
    }).then(function () {
      console.log('promise4')
    })
    console.log('script end')

    /*
      script start
      async1 start
      async2
      promise1
      script end
      async1 end
      promise2
      promise3
      promise4
      setTimeout
    */

进阶

	async function async1(params) {
      console.log('async1 start')
      await new Promise(resolve => {
        // resolve处理thenable也会再包裹一层promise
        resolve(async2())
      }).then(res => {
        console.log('async1 end')
      })
    }
    // async2是一个promise
    async function async2(params) {
      console.log('async2')
    }
    // 变体 async2不是promise 但是返回了一个thenable
    // function async2(params) {
    //   console.log('async2')
    //   return ({
    //     then(r) {r()}
    //   })
    // }
    setTimeout(() => {
      console.log('setTimeout')
    }, 0);
    async1();
    new Promise(function (resolve) {
      console.log('promise1')
      resolve()
    }).then(function () {
      console.log('promise2')
    }).then(function () {
      console.log('promise3')
    }).then(function () {
      console.log('promise4')
    })

    /*
      async1 start
      async2
      promise1
      promise2
      promise3
      async1 end
      promise4
      setTimeout
    */
    /* 变体
      async1 start
      async2
      promise1
      promise2
      async1 end
      promise3
      promise4
      setTimeout
    */

6.写在最后

1. js的异步我们从最开头就说javascript是一门单线程语言，不管是什么新框架新语法糖实现的所谓异步，其实都是用同步的方法去模拟的，牢牢把握住单线程这点非常重要。
2. 事件循环Event Loop事件循环是js实现异步的一种方法，也是js的执行机制。
3. javascript的执行和运行执行和运行有很大的区别，javascript在不同的环境下，比如node，浏览器，Ringo等等，执行方式是不同的。而运行大多指javascript解析引擎，是统一的。
4. setImmediate微任务和宏任务还有很多种类，比如setImmediate等等，执行都是有共同点的，有兴趣的同学可以自行了解。
5. 最后的最后最后的最后
   javascript是一门单线程语言
   Event Loop是javascript的执行机制