浅谈Event-Loop

js的单线程特点

说到event-loop,就不得不先说起js的单线程特点。所谓单线程，也就是在同一时间只能做一件事。那么为什么js要设计为单线程呢?

其实这跟js的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

event-loop里面的几个主角

1. 调用栈（Call Stack）
调用栈负责执行js里面的同步代码，所有代码按照顺序从上往下依次执行，当此处代码执行完毕后，就回去回调队列里面查看是由有需要执行的事件，有则拿到调用栈里继续执行，如此循环。
2.回调队列/任务队列（Callback Queue）
存放着属于Web Apis里面，已经到了可执行时机的事件的回调函数，例如时间已到的计时器（setTimeout…），ajax请求的结果，绑定并被触发了的事件（click，load…）
3.Web Apis
是一套由浏览器提供的操作浏览器功能和页面元素的api，大多都是一些方法（函数），一般都有输入和输出（函数的传参和返回值）

最简单的event-loop

介绍完所有主角，先简单看一个最简单的例子。

console.log(1);
setTimeout(() => {
	console.log(2)
}, 1000)
console.log(3)

宏任务和微任务

异步任务分为宏任务和微任务。他们也有相对应的宏任务队列和微任务队列。（可以理解为两种队列合在一起统称任务队列或循环队列）
宏任务包含script，setTimeout，DOM事件，ajax等。
微任务有Promise（部分浏览器将此认定为宏任务），async/await等
通常来讲，微任务执行顺序是在宏任务之前的。

DOM渲染的时机

如果js代码有改变DOM元素的代码，那么DOM元素会在何时进行渲染呢？

<script>
	const p1 = "<p>我是p标签</p>"
	document.querySelector("body").innerHTML = p1
	alert('同步代码执行完毕')
	setTimeout(() => {
		alert('异步代码宏任务执行完毕')
	})
	Promise.resolve().then(() => {
		alert('异步代码微任务执行完毕')
	})
</script>

执行上诉代码会发现DOM渲染是微任务执行完成后进行的。

总结

1、执行整个代码块（此处有人认为是将代码块认定为宏任务执行，有人不这么认为）
2、遇到setTimeout宏任务时，将其交给webapi，虽然没有设置延时，但是浏览器规定最低4ms，4ms后，setTimeout的回调进入宏任务队列中，等待被调用。
3、遇到Promise这类微任务时，交给webapi处理，因为直接resolve了，所以将then的回调函数放入微任务队列中。
4、此时第一个宏任务（最外层代码块）执行完成，注意此时，系统会先去微任务队列中取出任务依次放到执行栈中执行。然后就是进行DOM渲染，最后就是宏任务队列里面的代码。