写在前面
Event Loop(事件循环)，是大多数面试会问到的问题，我也遇到几次，都是胡乱回答，后面想来，感觉好蠢。今天又看到一篇文章，索性给它来个总结，便于日后复习(面试)。
什么是Event Loop
个人的理解，JavaScript是单线程的，遇到许多耗时的操作，就会阻塞，为了解决这个，所有就有异步。那么这个异步操作是怎么执行的，就是Event Loop的核心知识点。
关于Event Loop
Event Loop，中文名叫事件循环，拆分一下为event和loop，event为事件，可以理解为动作，就是浏览器需要做某个动作，比如点击鼠标，操作dom等。loop理解为循环，队列，即浏览器做这些动作，是有个先后顺序的。常见的顺序：先进先出(FIFO)，后进先出(LIFO)，浏览器中遵循的顺序是：宏任务-微任务为一个执行顺序，即一个循环，浏览器不断的执行这样的循环，就是Event Loop。
宏任务 与 微任务
宏任务macro task：包括整体代码script，setTimeout，setInterval
微任务micro task：Promise，process.nextTick(nodejs)
栗子
先来几个栗子尝尝鲜
1 console.log(1); 2 setTimeout(function() { 3 console.log(2); 4 }) 5 console.log(3);
setTimeout是宏任务，那么执行时会放在事件循环里面，可以理解为异步执行的，js执行顺序是先执行完同步再执行异步，所以执行顺序是1，3，2
下一个
1 console.log(1); 2 setTimeout(function() { 3 console.log(2) 4 }); 5 new Promise(function(resolve) { 6 console.log(3); 7 resolve(); 8 } 9 ).then(function() { 10 console.log(4) 11 }); 12 console.log(5);
这里出现了promise，属于是微任务，同时也有setTimeout，属于是宏任务，这里需要注意一个点，就是promise里面的是立即执行的，可以理解为同步。由于执行顺序是宏任务-微任务,因为整体代码片段是一个宏任务，所以执行整段代码后会执行promise.resolve，所以执行顺序是1,3,5,4,2
下一个
1 console.log('1'); 2 setTimeout(function() { 3 console.log('2'); 4 process.nextTick(function() { 5 console.log('3'); 6 }) 7 new Promise(function(resolve) { 8 console.log('4'); 9 resolve(); 10 }).then(function() { 11 console.log('5') 12 }) 13 }) 14 process.nextTick(function() { 15 console.log('6'); 16 }) 17 new Promise(function(resolve) { 18 console.log('7'); 19 resolve(); 20 }).then(function() { 21 console.log('8') 22 }) 23 setTimeout(function() { 24 console.log('9'); 25 process.nextTick(function() { 26 console.log('10'); 27 }) 28 new Promise(function(resolve) { 29 console.log('11'); 30 resolve(); 31 }).then(function() { 32 console.log('12') 33 }) 34 })
先看总体，1是同步执行没毛病，然后再根据宏任务-微任务，接下来就应该是promise，nextTick(nodejs)，执行完微任务，再找宏任务，即setTimeout，再找微任务，再找宏任务....一直到事件循环结束
那么这里的执行顺序应该是：1(同步)，7(立即执行)，6(微任务)，8(微任务)，2(宏任务)，4(立即执行)，3(微任务)，5(微任务)，9(宏任务)，11(立即执行)，10(微任务)，12(宏任务)
写在最后
以上为本人学习观点，例子来自于网络，如果有不正确的地方欢迎提出指正。