先看一下下面这段js代码：
console.log('1');
setTimeout(function(){
console.log('2');
},0);
console.log('3');
请问打印的结果是什么?
这段代码看似很简单，但如果不了解JavaScript运行机制就很容易答错。正确的输出是：1 3 2
一、JavaScript运行机制：
想要弄懂javascript执行机制（运行机制），首先要了解关于js相关的知识点，如下：
1、理解JavaScript是单线程的概念
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。JavaScript的单线程与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户交互以及操作DOM。这就决定了它只能是单线程的，否则会带来复杂的同步问题。所以，为了避免复杂性，从一诞生开始JavaScript就是单线程,这已经成为了这门语言的核心特征，将来也不会变。
2、 javaScript的同步任务和异步任务
单线程就意味着，所有任务需要排队。前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就得一直等着。JavaScript语言的设计者认识到这个问题，将所有任务分成两种：一种是同步任务（synchronous）,一种是异步任务（asynchronous）。
同步任务指的是：在主线程上排队执行的任务，只有前一个任务执行完成，才能执行后一个任务。
异步任务指的是：不进入主线程，而进入“任务队列（task queue）”的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
异步任务包括：定时器、网络请求、Promise
javaScript中同步任务和异步任务的执行机制流程如下（引用网上的一张图）：
1、所有同步任务都在主线程上执行，形成一个执行栈。
2、异步任务进入Event Table并注册函数。当异步任务有了运行结果时，Event Table会将这个函数移入 Event Queue
3、主线程中任务执行完毕为空，系统就会按次序的读取Event Queue中异步任务，进入执行栈，开始执行
4、主线程不断重复上面的第三步。因为这个过程是循环不断的，所以又称为事件循环（Event Loop）.
3、javaScript的宏任务和微任务
JavaScript的除了同步和异步任务外，对其任务还有更细的定义：宏任务（macro-task）和微任务（micro-task）。
宏任务：包括整体代码script,setTimout,setInterval
微任务：Promise，process.nextTick
整体代码（宏任务）执行完后（即主线程执行栈为空），就开始事件循环(上面提到的Event Loop)。每次循环都要看Event Queue中是否有微任务，如果有则执行完所有的微任务后再执行其中一个宏任务，一个宏任务执行完成后开始进行下一次的循环。下一次循环开始先执行所有的微任务然后再执行其中一个宏任务。依次循环下去。
javaScript中宏任务和微任务的执行机制流程如下：
四、异步任务有哪些？放入任务队列（或者事件队列）的时机
任务分为宏任务（macro）和微任务(micro),在任务队列中的执行书序：微任务优先于宏任务
异步微任务：
1.ES6中的Promise
放入任务队列的时机:异步操作成功（或者失败)后，将成功的回调函数(后者失败的回调函数)放入
放入任务队列的任务：将成功的回调函数(后者失败的回调函数)放入任务队列中
举例说明：
new Promise(function(resolve,reject){
resolve();
}).then(function(){
console.log('3')
});
new Promise()立即执行，then回调函数 function(){console.log('3')} 放到Event Table中注册函数，当resolved()后，回调函数会放到微任务 Event Queue中，等待进入主线程执行
异步宏任务：
1.定时器（setTimeout和setInterval）
放入Event Queue 时机：在规定时间到达后
放入Event Queue 的任务：将回调函数放入宏事件队列中
举例说明：
setTimeout(fn,5000)
fn进入Event Table,开始计时，等到5秒后回调函数进入Event Queue.当主线程代码为空时，就会读取Event Queue 中的回调函数，进入主线程开始执行。
2.Ajax异步请求
放入Event Queue的时机：在axjax加载完成时
放入Event Queue 的任务: 将回调函数放入宏任务事件队列中
举例说明：
$.ajax({
url:'',
data:{},
success:function(){
console.log('发送成功')
}
})
ajax进入Event Table,当ajax请求成功后，回调函数success进入Event Queue 。当主线程代码为空时，就会读取Event Queue 中的success回调函数，进入主线程开始执行。
3.DOM事件
放入Event Queue 的时机：在用户操作事件完成后
放入Event Queue 的任务: 将回调函数放入宏任务事件队列中
举例说明：
ele.on('click',fn,false);
fn 进入Event Table，当触发click事件后，会将fn放入Event Queue中。
五、分析下面代码，看看是否掌握了JS的执行机制
例1：
console.log('1');
setTimeout(function(){
console.log('2');
}，1000);
new Promise(function(resolve){
console.log('3');
resolve();//Promise没有写resolve,then回调函数不会执行，为了测试直接执行
}).then(function(){
console.log('4');
})
console.log('5');
分析：
* 整体script作为第一个宏任务进入主线程,遇到console.log,输出1.
* 遇到setTimeout, setTimeout是异步任务,被放到了event table 。1s 中中后，将其回调函数放到宏任务Event Queue 中。我们暂且记为setTimeout1
*遇到Promise, new Promise是同步任务，直接 输出3; .then里的函数是异步任务，被放到了event table。当执行resolve后将then回调函数放到微任务Event Queue。我们暂且记为then1
* 遇到console.log('5'),直接 输出5
* 到此主线程的任务执行完毕，第一轮事件循环宏任务结束。开始读取Event Queue中的事件,我们发现有一个微任务then1,所以先读取then1，输出4 。到此第一轮事件循环正式结束。
* 第二轮事件循环从setTineout1开始， 输出2。第二轮事件循环结束。
所以结果是：1 -> 3 -> 5 -> 4 -> 2
例2：
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');
})
})
console.log('13');
分析：
1. 第一轮事件循环流程：
* 整体script作为第一个宏任务进入主线程，遇到console.log('1'),直接输出1
* 遇到setTimout,将其回调函数放到宏任务Event Queue中。我们暂且几位setTimeout1.
* 遇到Promise。new Promise直接执行，输出7。then回调函数被放到微任务Event Queue中，我们暂且记为then1
* 遇到setTimeout，将其回调函数放到宏任务Event Queue中。我们暂且记为setTimeout2
* 遇到console.log('13'),直接输出 13
* 到此第一轮事件循环宏任务结束。此时Event Queue中的任务情况： 宏任务： setTimeout1 setTimeout2；微任务：then1
* 开始执行事件队列上的所有微任务，我们发现只有then1一个微任务，所以直接执行then1，输出8
* 到此，第一轮事件循环正式结束。
2. 第二轮事件循环流程：
* 从事件队列中的宏任务setTimeout1开始执行，直接输出2
* 遇到promise, new Promise直接执行，输出4。 then回调函数被放微任务Event Queue中，记为 then2
* 到此第二轮事件循环宏任务结束。此时Event Queue中的情况： 宏任务：setTimeout2 ;微任务：then2
* 开始执行event Queue中的所有微任务，发现只有then2一个微任务。直接执行，输出5
* 到此，第二轮事件循环正式结束
3. 第三轮事件循环流程：
* 宏任务只剩下setTimeout2了，直接输出9.
* 遇到promise ，new Promise 直接执行，输出11。 将then回调函数放到微任务Event Queue中，记为then3
* 第三轮事件循环宏任务结束，开始执行微任务then3,输出 12
* 第三轮事件循环结束
3. 整段代码公鸡行了三次事件循环，输出：1 -> 7 -> 13 ->8 -> 2 ->4->5 -> 9 ->11->12