js执行机制-包会（事件循环、任务队列、宏任务、微任务）

1、前言了解

js本是单线程，但很多时候，单线程效率太慢，影响进度，于是又有了多进程的发展，当然这仅仅是在单线程里站队将其分解多步解决问题。

2、同步异步的了解

同步是指按照顺序执行的操作，当前一件事未完成之前，后面的事件都不能启动。异步则不一样，异步就是指多件事情可以同时操作，不需要谁等谁。同步就像是只有一个队列，该队列只有一个窗口可以解决问题，而异步就像是一个队列，但是队列中的每一项都有一个窗口可以解决问题。 同步异步区别

3、微观、宏观

这里只需要知道微观事件有哪些，微观事件是归类到微观队列里去的，主要有Promise.then的回掉函数宏观事件比较多，比如定时器、script块、IO设备等等

4、任务队列

事件执行的时候遇到异步操作就会提交给浏览器的API，而webAPI就会将其注册列表内，然后再根据优先级（各个浏览器优先级不一样）返回到任务队列里面，任务队列将其分成微观队列和宏观队列，对应的就是微观事件和宏观事件。

5、事件循环

1）js在执行栈里执行事件 2）先在执行栈里面执行事件，遇到异步操作就将其返回给WebApl，WebApi再返回队列。 3）执行栈里的事件执行完毕后，先到该队列里找到是否有微观事件，有就执行 4）微观事件执行完毕，查看队列里是否有宏观任务，再执行按照步骤1234即可 5）这样不断的执行寻找就是事件循环

6、代码实现

1）首先上一个简单的例子

<script type="text/javascript"> new Promise(function(resolve){ console.log(1) for( var i=0 ; i<10000 ; i++ ){ i==9999 && resolve() } console.log(2) }).then(function(){//promise的回掉函数 console.log(5) }); setTimeout(function(){console.log(4)},0); console.log(3); </script>

上面代码执行顺序是怎样的呢，下面可以根据事件循环的机制走一遍 1）js在执行栈里执行事件（script就是第一个宏观任务，也就是执行栈） 2）先在执行栈里面执行事件，首先是promise的函数是一个普通函数，故执行里面代码，可得到结果1、2，然后遇到了.then回掉函数将其返回给WebApl，WebApi再返回到微观队列。再往下执行遇到了setTimeout定时器，是宏观任务就将其返回到宏观队列的任务列表，之后再执行最后一步得到3 3）执行栈里的事件执行完毕后，先到该队列里找到是否有微观事件，咱们的微观任务队列里面有.then回掉函数，故可以先执行这个操作得到结果5 4）微观事件执行完毕，再到队列里查看是否有宏观事件，这时发现了定时器故执行后的结果4 5）不断的查看队列，直到队列为空即可 最后可以输出结果答案就是12354

按照以上步骤大家可以检测一下自己是否真正懂了，以下是一份稍微复杂的执行代码。

console.log('1'); setTimeout(function() { console.log('2'); new Promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5') }) }) new Promise(function(resolve) { console.log('7'); resolve(); }).then(function() { console.log('8') }) setTimeout(function() { console.log('9'); new Promise(function(resolve) { console.log('11'); resolve(); }).then(function() { console.log('12') }) })

大家可以按照上面写的js的执行顺序去执行看自己是否真正理解掌握了 最后结果是1、7、8、2、4、5、9、11、12。

7、总结

不管是怎么复杂的事件，只要记住，先执行看到的，遇到异步操作先不管，先走执行栈里面的代码，执行完毕后再微观队列然后宏观队列。