event loop 事件循环

最新推荐文章于 2024-01-23 17:13:17 发布

超级无敌谢大脚

最新推荐文章于 2024-01-23 17:13:17 发布

阅读量124

点赞数

分类专栏：小知识点个人笔记文章标签： js 事件处理机制

本文链接：https://blog.csdn.net/Cang_Ye/article/details/119593766

版权

个人笔记同时被 2 个专栏收录

67 篇文章 1 订阅

订阅专栏

小知识点

40 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript的单线程执行机制、事件循环（Event Loop）、调用栈、消息队列和微任务队列。通过一个具体的代码示例解释了宏任务和微任务的执行顺序，展示了如何理解和利用这些概念来优化JavaScript代码的执行效率。

摘要由CSDN通过智能技术生成

调用栈（call stack）、消息队列（Message Queue）、微任务队列（Microtask Queue）

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

JS代码在浏览器中运行时单线程的，event loop 会一行一行的执行代码

遇到函数就会把函数压入调用栈中执行函数里的代码代码执行完毕弹出

遇到宏任务就把宏任务压入消息队列

遇到微任务就把微任务压入微任务队列

当主线程中的代码全部执行完毕调用栈清空后，就会开始只执行消息队列里的宏任务；但是每一次执行消息队列里的宏任务之前，就必须先查看一下微任务队列里的微任务，每一次执行宏任务前必须把微任务队列里的微任务执行完毕。

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 1 4

JS线程会先把 fn2 压入调用栈执行函数代码；p.then()执行把log（3）压入调用栈然后执行输出 3 弹出；把log（1）压入微任务队列；把log（6）压入调用栈输出6 弹出；fn1 压入调用栈, log(5)被踏入执行输出 5 弹出；把settimeout log（4）压入消息队列；fn1 执行完毕弹出，继续执行fn2 代码；log（7）压入调用栈输出7 弹出；fn2 执行完毕弹出，调用栈空！执行消息队列，每一次执行消息队列前，检查微任务队列是否为空，不为空则执行微任务队列，log（1）输出1 弹出；微任务队列为空执行宏任务队列 log（4）输出4 弹出；宏任务队列为空，代码执行完毕。