对event loop的理解（event loop事件循环的运行机制）

妖狐艹你老母 2022-10-27 13:50 269阅读 0赞

# 前言 #

js是一种单线程的语言，所以它通过event loop机制实现了对异步任务和多线程。  
首先你要对栈、队列的数据结构有一定的了解，其次还要会Promise才能看懂今天的内容。

--------------------

# 一、在了解event loop前，我们首先要知道一些基础知识 #

宏任务：script全部代码、setTimeout、setInterval、setImmediate、I/O、UI Rendering。  
微任务：Process.nextTick（Node 独有）、Promise 等。

event loop大体由三个部分组成：**调用栈**（call stack）、**消息队列**（Message Queue）、**微任务队列**（Microtask Queue）。这三个部分在event loop中非常重要。

# 二、event loop的运行机制 #

下面通过一些例子举例说明什么是event loop

## 1.只有宏任务时 ##

代码如下（示例）：

function fn1(){ 
    	console.log(5)
    	setTimeout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    	console.log(6)
    	fn1()
    	console.log(7)
    }
    fn2();

首先event loop会从全局栈一行一行执行，首先遇到 fn2（），此时fn2（）进入调用栈。

function fn1(){ 
    	console.log(5)
    	setTimeout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    	console.log(6)
    	fn1()
    	console.log(7)
    }
    =>fn2();
    
    		调用栈						消息队列
    |                      |		-------------------------
    |                      |								
    | fn2()                |		-------------------------
    ------------------------

随后进入到fn2（）中，遇到 console.log ，将其压入栈。

function fn1(){ 
    	console.log(5)
    	setTimeout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    =>	console.log(6)
    	fn1()
    	console.log(7)
    }
    fn2();
    	
    		调用栈						消息队列
    |                      |		-------------------------
    | console.log(6)       |								
    | fn2()                |		-------------------------
    ------------------------

执行console.log(6)并弹出。

function fn1(){ 
    	console.log(5)
    	setTimeout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    =>	console.log(6)
    	fn1()
    	console.log(7)
    }
    fn2();
    	
    		调用栈						消息队列
    |                      |		-------------------------
    |                      |								
    | fn2()                |		-------------------------
    ------------------------
    //输出 6

遇到 fn1（），此时fn1（）进入调用栈。

function fn1(){ 
    	console.log(5)
    	setTimeout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    	console.log(6)
    =>	fn1()
    	console.log(7)
    }
    fn2();
    	
    		调用栈						消息队列
    |                      |		-------------------------
    | fn1()                |								
    | fn2()                |		-------------------------
    ------------------------
    //输出 6

进入fn1(),遇到console.log，将其压入栈并执行并弹出（跟上面一样），输出多了一个 5 。

function fn1(){ 
    =>	console.log(5)
    	setTimeout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    	console.log(6)
    	fn1()
    	console.log(7)
    }
    fn2();
    	
    		调用栈						消息队列
    |                      |		-------------------------
    | fn1()                |								
    | fn2()                |		-------------------------
    ------------------------
    //输出 6 5

随后遇到setTimeout,将它的内容压入消息队列。消息队列的内容会在调用栈清空后再开始执行！

function fn1(){ 
    	console.log(5)
    =>	setTimeout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    	console.log(6)
    	fn1()
    	console.log(7)
    }
    fn2();
    	
    		调用栈						消息队列
    |                      |		-------------------------
    | fn1()                |		console.log(4) 
    | fn2()                |		-------------------------
    ------------------------
    //输出 6 5

此时fn1执行完，从调用栈弹出，执行回到fn2，遇到console.log，将其压入调用栈。

function fn1(){ 
    	console.log(5)
    	setTimeout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    	console.log(6)
    	fn1()
    =>	console.log(7)
    }
    fn2();
    	
    		调用栈						消息队列
    |                      |		-------------------------
    | console.log(7)       |		console.log(4) 
    | fn2()                |		-------------------------
    ------------------------
    //输出 6 5

console.log执行后，输出7，随后fn2也执行完毕从调用栈弹出，此时调用栈为空。

function fn1(){ 
    	console.log(5)
    	setTimeout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    	console.log(6)
    	fn1()
    	console.log(7)
    }
    fn2();
    	
    		调用栈						消息队列
    |                      |		-------------------------
    |                      |		console.log(4) 
    |                      |		-------------------------
    ------------------------
    //输出 6 5 7

最后执行消息队列中的内容。

function fn1(){ 
    	console.log(5)
    	setTimeout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    	console.log(6)
    	fn1()
    	console.log(7)
    }
    fn2();
    	
    		调用栈						消息队列
    |                      |		-------------------------
    |                      |		
    |                      |		-------------------------
    ------------------------
    //输出 6 5 7 4

### 总结：首先将按顺序执行，遇到函数压入栈，遇到宏任务压入消息队列，栈清空后执行消息队列。 ###

## 2.即有宏任务，又有微任务 ##

代码如下（示例）：

注意这一段代码与之前的有什么不同？  
我们在最开始声明了一个Promise对象，并在fn2中调用了它的then方法。  
此时在fn2调用前唯一的不同就是，我们在最开始创建Promise对象的时候执行了一个console.log并输出3，然后将这个Promise的状态更改为successed。

let p = new Promise(function(resolve){   
    	console.log(3)
    	resolve()
    })
    function fn1(){ 
    	console.log(5)
    	setTimeout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    	p.then(funtion(){ 
    		console.log(1)
    	})
    	console.log(6)
    	fn1()
    	console.log(7)
    }
    fn2();	
    		调用栈						消息队列
    |                      |		-------------------------
    |                      |		
    |                      |		-------------------------
    ------------------------
    									微任务队列
    								-------------------------
    					
                             		-------------------------
    //输出 3

接下来执行到fn2中的then方法时，会将根据promise的状态将resolve的内容压入微任务队列（此处我们不考虑构造Promise对象时异步调用resolve的情况，此处如果不理解可以查看与Promise原理有关的资料）。

let p = new Promise(function(resolve){   
    	console.log(3)
    	resolve()
    })
    function fn1(){ 
    	console.log(5)
    	setTimmout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    	p.then(funtion(){ 
    		console.log(1)
    	})
    	console.log(6)
    	fn1()
    	console.log(7)
    }
    fn2();	
    		调用栈						消息队列
    |                      |		-------------------------
    |                      |		
    | fn2()                |		-------------------------
    ------------------------
    									微任务队列
    								-------------------------
    								consolo.log(1)
                             		-------------------------
    //输出 3

接下来的执行都与上面一致，我们直接来到fn2执行完毕。

let p = new Promise(function(resolve){   
    	console.log(3)
    	resolve()
    })
    function fn1(){ 
    	console.log(5)
    	setTimmout(function(){ 
    		console.log(4)
    	},0)
    }
    function fn2(){ 
    	p.then(funtion(){ 
    		console.log(1)
    	})
    	console.log(6)
    	fn1()
    	console.log(7)
    }
    fn2();	
    		调用栈						消息队列
    |                      |		-------------------------
    |                      |		consolo.log(4)
    |                      |		-------------------------
    ------------------------
    									微任务队列
    								-------------------------
    								consolo.log(1)
                             		-------------------------
    //输出 3 6 5 7

此时我们发现，调用栈被清空了，此时微任务队列要优先于消息队列执行,也就是说，先执行console.log(1)再执行console.log(4)。  
最终的师叔也就是3 6 5 7 1 4。

### 总结：遇到微任务会加入微任务队列，当调用栈清空时，如果消息队列和微任务队列都有内容，先执行微任务队列，再执行消息队列。 ###

以上内容为个人学习过event loop后的个人理解，如有不准确的地方请及时指出。