js的事件循环机制event-loop

js的事件循环机制

js的语言特点

单线程，解释型语言（解释一行执行一行）

event-loop

事件循环机制 由三部分组成
1.调用栈
2.微任务队列 nextTick promise
3.消息队列（宏任务ssetTimeout setInterval object.observe
event-loop开始的时候会从全局一行一行的执行，遇到函数调用，会压入到调用栈中，被压入的函数被称之为帧，当函数执行完后会从调用栈中弹出代码如下

//例
function fn1(){
	console.log(1);
}

function fn2(){
	console.log(2);
	fn1()
	console.log(3);
}
fn2()

上面代码执行过程

js中的异步操作比如fetch setTimeout setInterval压入到调用栈中的时候里面的消息会进去到消息队列（宏任务）中去消息队列（宏任务）中会等到栈清空之后在执行代码如下

function fn1(){
	console.log(1);
}
function fn2(){
	setTimeout(()=>{
		console.log(2)
	},0)
	fn1()
	console.log(3);
}
fn2()

上面代码执行过程

promise async await 的异步操作时候会加入到微任务中，会在调用栈清空的时候立即执行 调用栈中加入的微任务会立即执行（微任务会在调用栈清空的时候立即执行，它的优先级大于消息队列（宏任务））

var p = new Promise(resolve=>{
				console.log(4);
				resolve(5)
			})
				
			function fn1(){
				console.log(1);
			}
			
			function fn2(){
				setTimeout(()=>{
					console.log(2);
				})
				fn1()
				console.log(3);
				p.then(res=>{
					console.log(res);
				})
			}

上面代码执行过程

像promise async await的异步操作会加入到微任务中
这段代码执行的时候调用栈中的微任务会立马执行console.log(4)会压入到调用栈中立即执行 resove（5）也会立即执行此时输入4resolve(5)执行完毕也会被弹出，但不会输出会在.then的时候输出，然后fn2执行压入调用栈，之后碰到setTimeout console.log(2)到消息队列中。然后fn1调用输输出console.log(1) 之后输出console.log(3) 然后到微任务console.log(res) 微任务要比消息队列先执行输出5.之后整个调用栈执行完毕，最后执行消息队列 输出2