什么是Event Loop？

什么是Event Loop？

Event Loop即事件循环，它是是一个执行模型，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。浏览器和NodeJS基于不同的技术实现了各自的Event Loop。

由于javaScript是单线程的,只有当上一个任务完成之后才会去执行下一个任务，如果前一个任务耗时很长，后面的任务就需要一直等待前面一个任务完成。于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

• 同步任务：
  在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
• 异步任务：
  异步任务不是直接进入主线程，而是先进入Event Table，进入Event Table之后注册回调函数，等到事件结束之后（例如定时器setTimeout定时结束），回调函数进入Event Queue，进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
  异步任务必须指定回调函数，当主线程开始执行异步任务的时候，就是在执行对应的回调函数。

例如：

setTimeout(() => {
    task()
},3000)

sleep(10000000)

执行过程：

1. 首先 setTimeout 进入 Event Table 注册回调函数 task()，计时开始
2. 执行sleep函数
3. 3秒之后，计时结束，task()进入task queue中，但是此时的sleep还未执行完，task()只能等着，等到sleep执行完
4. sleep执行完之后，执行task()

宏任务和微任务

不同的异步任务被分为：宏任务和微任务，执行顺序是先宏后微

宏任务：

• script(整体代码)
• setTimeout()
• setInterval()
• postMessage
• I/O
• UI交互事件
• setImmediate()
  
  微任务：
• new Promise().then(回调)
• MutationObserver(html5 新特性)
• process.nextTick

例如：

console.log("1");

// setTimeout1
setTimeout(function () {
	console.log("2");
	// process2
	process.nextTick(function () {
		console.log("3");
	});
	new Promise(function (resolve) {
		console.log("4");
		resolve();
		// then2
	}).then(function () {
		console.log("5");
	});
});

// process1
process.nextTick(function () {
	console.log("6");
});
new Promise(function (resolve) {
	console.log("7");
	resolve();
	// then1
}).then(function () {
	console.log("8");
});

// setTimeout2
setTimeout(function () {
	console.log("9");
	// process3
	process.nextTick(function () {
		console.log("10");
	});
	new Promise(function (resolve) {
		console.log("11");
		resolve();
		// then3
	}).then(function () {
		console.log("12");
	});
});