js eventLoop 事件循环机制

js是单线程脚本语言 why？

js作为主要运行在浏览器的脚本语言，js主要用途之一是操作DOM。如果js同时有多个线程，同时对同一个dom进行操作，这时浏览器应该听哪个线程的，如何判断优先级呢？为了避免这种问题，js必须是一门单线程语言；
因此，js在同一时间，只能做同一件事，为了协调事件、用户交互、脚本、UI渲染和网络处理等行为，防止主线程阻塞，Event Loop应运而生；

什么是 EventLoop？

Event Loop顾名思义：“事件循环”，是指浏览器或Node环境的一种解决javaScript单线程运行时阻塞问题的一种机制，也就是实现异步的原理。

js是单线程，所以js执行任务时要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。那么问题来了，假如我们购物逛淘宝时，高清图片很多，加载很慢，难道我们的网页要一直卡着直到图片完全显示出来？答案是否定的。于是，事件就被分为了：
1.同步事件
2.异步事件
异步事件又包含：宏任务（macrotask），微任务（microtask）；

任务执行流程是怎样的呢？

如图：

• 同步的进入主线程；
• 异步任务进入事件队列，Event Table注册回调函数移入Event Queue；
• 主线程内的任务执行完毕，会去Event Queue读取对应的函数，将任务移入主线程执行。
• 不断重复。

异步任务之“微任务(microtask)”

一般认为包含以下三种：

• Promise中的then、catch、finally
• MutationObserver（监视 DOM 变动的API）
• Process.nextTick（Node环境，通常也被认为是微任务）

异步任务之“宏任务(macrotask)”

我们将javascript中非微任务（MircoTask）的所有任务都归为宏任务，比如：

• script中全部代码
• DOM操作
• 用户交互操作
• postMessage跨文档通讯
• Channel Message跨通道通讯
• setImmediate(Node.js 环境)
• 定时器相关的 setTimeout、setInterval 等；

微任务和宏任务皆为异步任务，它们都属于一个队列，主要区别在于他们的执行顺序

如图：

代码演示

console.log(1);
setTimeout(function() {
  console.log(2);
}, 0);
new Promise(function(resolve){
	console.log(3);
	resolve(4)
}).then(function(res){
	console.log(res)
})
console.log(5);

解读：1.先执行script同步代码，执行同步任务，输出1，3，5；
2.将setTimeout 和Promise 加入队列中；
3.执行微任务promise.then 输出4，没有其他微任务了；
4.执行宏任务 setTimeout，输出 2；
故最后输出为：1，3，5，4，2；

课堂练习

经典面试题：

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

输出结果为：1，7，6，8，2，4，3，5，9，11，10，12；
备注：process在浏览器控制台会报错，在浏览器执行时可删除process.nextTick
大家都做对了吗？有哪里不对的地方，欢迎大家指出！