js运行机制及异步编程（二）

上一篇文章主要整理了一下js引擎是如何工作的，这篇文章主要整理js的事件循环Event loop，以及异步编程的原理事件循环Event loop之前文章中有讲到js是单线程的，而浏览器渲染内核包含多个线程的，和js代码部分相关的线程有如下几个：js引擎线程处理ajax请求的线程，处理DOM事件的线程，定时器，读写文件的线程（Node.JS）等因为JS是单线程的，这是从JS引擎的角度来看的，所谓的单线程就是指在JS引擎中负责解释和执行JS代码的线程只有一个：主线程。js分为同步任务和异步任务，同步任务都在主线程上执行，就形成一个执行栈，主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列中放置一个事件。一旦执行栈中所有的同步任务执行完毕（此时js引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。JS的执行机制就是一个主线程 + 一个任务队列。同步任务就是放在主线程上执行的任务，异步任务就是放在任务队列的任务。所有的同步任务都在主线程执行，这构成了一个执行栈，异步任务有了运行结果会在任务队列中放置一个事件，比如定时2秒，到2秒后才能放进任务队列（callback放进任务队列，而不是setTimeout函数放进队列）。事件循环（Event Loop）—— 脚本运行时，先依次运行执行栈，然后从队列中提取事件来运行任务队列中的任务，这个过程是不断重复的。所以叫事件循环（Event Loop）。macrotask和microtask上述js运行的机制主要说明的是es5，而es6的出现及普及，又有了新的概念，promise，它的出现，进一步，JS中分为两种任务类型：macrotask和microtask，在ECMAScript中，microtask称为jobs，macrotask可称为task。分别很么样的场景会形成macrotask和microtask呢？macrotask：主代码块，setTimeout，setInterval, setImmediate, I/O, UI rendering. 等（可以看到，事件队列中的每一个事件都是一个macrotask）microtask： process.nextTick, Promise(原生)，Object.observe，MutationObserver在node环境下，process.nextTick的优先级高于Promise，也就是可以简单理解为：在宏任务结束后会先执行微任务队列中的nextTickQueue部分，然后才会执行微任务中的Promise部分。总结下运行机制：执行一个宏任务（栈中没有就从事件队列中获取）执行过程中如果遇到微任务，就将它添加到微任务的任务队列中宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）案例说明案例1：setImmediate(function(){ console.log(1);},0);setTimeout(function(){ console.log(2);},0);new Promise(function(resolve){ console.log(3); resolve(); console.log(4);}).then(function(){ console.log(5);});console.log(6);process.nextTick(function(){ console.log(7);});console.log(8);根据js的运行原理解释上面代码的执行顺序：第一步 script整体代码被执行，执行过程为创建setImmediate macro-task创建setTimeout macro-task创建micro-task Promise.then 的回调，并执行script console.log(3); resolve(); console.log(4); 此时输出3和4，虽然resolve调用了，执行了但是整体代码还没执行完，无法进入Promise.then 流程。console.log(6)输出6process.nextTick 创建micro-taskconsole.log(8) 输出8 第一个过程过后，已经输出了3 4 6 8第二步由于其他micro-task 的优先级高于macro-task。此时micro-task 中有两个任务按照优先级process.nextTick 高于 Promise。所以先输出7，再输出5第三步 micro-task 任务列表已经执行完毕，家下来执行macro-task. 由于setTimeout的优先级高于setIImmediate，所以先输出2，再输出1。参考：https://blog.csdn.net/gy_u_yg… https://blog.csdn.net/m0_3775…