事件循环机制、js宏任务和微任务

js代码的执行过程，是js引擎先编译再执行，编译完成两件事：创建执行上下文和生成可执行代码；编译阶段完成后，js引擎开始执行可执行代码；

一、事件循环概述

事件循环即Event Loop，分为两种,分别是浏览器事件循环和node.js事件循环

事件循环， 是JavaScript或Node为解决单线程代码执行不阻塞主进程一种机制，也就是我们所说的异步原理。

事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。是JS引擎管理事件执行的一个流程

二、为什么JavaScript是单线程？

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

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

JavaScript 是一种单线程的编程语言，只有一个调用栈，决定了它在同一时间只能做一件事。在代码执行的时候，都只有一个主线程来处理所有的任务，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行。在执行同步代码的时候，如果遇到了异步事件（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件），js 引擎并不会一直等待其返回结果，而是会将这个事件挂起（pending），继续执行执行栈中的其他任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。因此JS又是一个非阻塞、异步、并发式的编程语言。

三、Event Loop ( 事件循环 )

浏览器的事件循环分为同步任务和异步任务；所有同步任务都在主线程上执行，形成一个函数调用栈（执行栈），而异步则先放到任务队列（task queue）里，任务队列又分为宏任务（macro-task）与微任务（micro-task）。下面的整个执行过程就是事件循环

宏任务大概包括：：script（整块代码）、setTimeout、setInterval、I/O、UI交互事件、setImmediate（node环境）

微任务大概包括：：new promise().then(回调)、MutationObserver(html5新特新)、Object.observe(已废弃)、process.nextTick（node环境）
若同时存在promise和nextTick，则先执行nextTick

四、执行过程

整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为两部分：“同步任务”、“异步任务”；

同步任务会直接进入主线程依次执行；

异步任务会再分为宏任务(进入宏任务队列) 和 微任务(进入微任务队列)。

当主线程内的任务执行完毕（主线程为空时），会检查微任务的任务队列，如果有任务，就进入主线程全部执行，如果没有就从宏任务队列读取下一个宏任务执行；

每执行完一个宏任务就清空一次微任务队列，此过程会不断重复，这就是Event Loop；

整个script就是一个宏任务，怎么测试呢，就是写两个script，和setTimeout定时器时间设置问0，它里面的执行顺序是一样的；如果script是同步任务，会先执行两个script的同步代码，但事实是，先执行第一个script中的同步任务和微任务，执行完后再执行另一个script的同步任务和微任务，所以script整体是一个宏任务。

五、示例

<!-- 脚本 1 -->
<script>
	// 同步
	console.log('start1')
	// 异步宏
	setTimeout(() => console.log('timer1'), 0)
	new Promise((resolve, reject) => {
		// 同步
		console.log('p1')
		resolve()
	}).then(() => {
		// 异步微
		console.log('then1')
	})
	// 同步
	console.log('end1')
</script>

<!-- 脚本 2 -->
<script>
	// 同步
	console.log('start2')
	// 异步宏
	setTimeout(() => console.log('timer2'), 0)
	new Promise((resolve, reject) => {
		// 同步
		console.log('p2')
		resolve()
	}).then(() => {
		// 异步微
		console.log('then2')
	})
	// 同步
	console.log('end2')
</script>

输出结果：start1 p1 end1 then1 start2 p2 end2 then2 timer1 timer2
执行顺序是：
  排前面的 script作为宏任务 先执行，执行其内部的【同】，再执行其【微】，接着就轮到下一个大的宏，也就是执行下一个 script，【同】、【微】。。。顺序执行完后，再从头开始，看第一个 script 是否有需要执行的【宏】，再去下一个 script 中找 【宏】