弄懂浏览器端事件循环机制Event Loop

[TOC]

写在前面:
如果对某一个概念在多次读过文档后仍不理解那么最大的可能是与之配套的知识结构还不完整

这里你需要理解这么几个概念
	`队列,栈,宏任务,微任务`
#栈（Stack）
栈在计算机科学中是限定仅在表尾进行插入或删除操作的线性表。  栈是一种数据结构，它按照后进先出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据。
	栈是只能在某一端插入和删除的特殊线性表。

#队列（Queue）
特殊之处在于它只允许在表的前端（front）进行删除操作，而在表的后端（rear）进行插入操作，和栈一样，队列是一种操作受限制的线性表。
进行插入操作的端称为队尾，进行删除操作的端称为队头。  队列中没有元素时，称为空队列。
队列的数据元素又称为队列元素。在队列中插入一个队列元素称为入队，从队列中删除一个队列元素称为出队。因为队列只允许在一端插入，在另一端删除，所以只有最早进入队列的元素才能最先从队列中删除，故队列又称为先进先出（FIFO—first in first out）

宏任务和微任务
# 宏任务
macrotask,也叫tasks,一些异步任务的回调会一次进入macro task queue,等待后续被调用,这些也不任务包括:
	
		setInterval
		setTimeout
		setImmediate(Node独有)
		requestAnimationFrame(浏览器独有)
		I/O
		UI rendering(浏览器独有)

# 微任务
microtask, 也叫jobs.另一些异步任务的回调回一次进入micro task queue,等待后续被调用,这些异步任务包括:
	
	process.nextTick(Node独有)
	Promise.then()
	Object.observe
	MutationObserver
	(注:这里只是针对浏览器和Nodejs)
	
	注意:Promise构建函数里的代码是同步执行的
#事件循环的进程模型

选择当前要执行的任务队列，选择任务队列中最先进入的任务，如果任务队列为空即null，则执行跳转到微任务（MicroTask）的执行步骤。
	将事件循环中的任务设置为已选择任务。
	执行任务。
	将事件循环中当前运行任务设置为null。
	将已经运行完成的任务从任务队列中删除。
	microtasks步骤：进入microtask检查点。
	更新界面渲染。
	返回第一步。

#执行进入microtask检查点时，用户代理会执行以下步骤：

设置microtask检查点标志为true。
	当事件循环microtask执行不为空时：选择一个最先进入的microtask队列的microtask，将事件循环的microtask设置为已选择的microtask，运行microtask，将已经执行完成的microtask为null，移出microtask中的microtask。
	清理IndexDB事务
	设置进入microtask检查点的标志为false。
	
	执行栈在执行完同步任务后，查看执行栈是否为空，如果执行栈为空，就会去检查微任务(microTask)队列是否为空，如果为空的话，就执行Task（宏任务），否则就一次性执行完所有微任务。
每次单个宏任务执行完毕后，检查微任务(microTask)队列是否为空，如果不为空的话，会按照先入先出的规则全部执行完微任务(microTask)后，设置微任务(microTask)队列为null，然后再执行宏任务，如此循环。

演示:

```javascript
	console.log('script start');

setTimeout(function() {
	  console.log('setTimeout');
	}, 0);

Promise.resolve().then(function() {
	  console.log('promise1');
	}).then(function() {
	  console.log('promise2');
	});

console.log('script end');
```

测试:
```javascript
	console.time("start")
	
	setTimeout(function () {
		console.log(2)
	})
	
	new Promise(function (resolve) {
		console.log(3)
		resolve();
		console.log(4)
	}).then(function () {
		console.log(5)
		console.timeEnd("start")
	})
	
	console.log(6)
	console.log(8)
	requestAnimationFrame(() => console.log(9)
	
```
3,4,6,8,5,start,2,9
	
参考:
https://segmentfault.com/a/1190000016295324
https://cnodejs.org/topic/5a9108d78d6e16e56bb80882
https://juejin.im/post/5c3d8956e51d4511dc72c200
https://segmentfault.com/a/1190000010622146
https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
[END]