EventLoop机制

事件循环机制

javascript是一个单线程的语言

任务类型

执行顺序

JS是从上到下一行一行执行。
如果某一行执行报错，则停止执行下面的代码。
先执行同步代码，再执行异步代码（先执行微任务，在执行宏任务）

微任务>Dom渲染>宏任务

EventLoop过程

同步代码，一行一行放入Call Stack中执行
遇到异步，会先“记录”下，等待执行时机（setTimeout,Ajax）,时机到了，将之前“记录”的代码放入Callback Queue
当Call Stack为空（也就是同步代码执行完之后），EventLoop开始工作
EventLoop轮询查找Callback Queue中是否有可执行的代码。如果有，将代码移动到Call Stack中执行
EventLoop如果没有找到可以执行的代码，则会继续轮询查找

微任务/宏任务/DOM渲染

微任务是由ES6语法规定的
宏任务是由浏览器规定的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width: 100px; height: 100px; background: red;" ></div>
</body>
<script type="text/javascript">
	console.log("start");

	setTimeout(() => {
		alert("宏任务"); // alert有阻塞DOM运行的效果
		console.log("倒计时定时间器--宏任务")
	},0)

	Promise.resolve().then(() => {
		alert("微任务");
		console.log("Promise---微任务")
	})

	console.log("end")
</script>
</html>