jsEventLoop事件循环

　　来源：Loong Panda
　　概念
　　Event Loop即事件循环，是解决javaScript单线程运行阻塞的一种机制。 主要是为了协调单线程下，事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞。
　　因为JavaScript 是单线程，也就是说， 所有任务需要排队，前一个任务结束，才会执行后一个任务。
　　但是IO设备（输入、出设备）可能会因为网络等因数导致速度很慢（比如Ajax）继而CPU没有充分利用，所以设计者将IO设备的任务挂起，先执行后面的任务，等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。于是，就把所有任务分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。
　　同步任务：
　　只有前一个任务执行完毕，才能执行后一个任务；直接在主线程上排队执行且最先执行，形成一个执行栈
　　异步任务：
　　不进入主线程、而是进入＂任务队列＂（task queue）的任务，只有＂任务队列＂通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。 一、microtask(微任务) 1、Promise.then 2、MutationObserver（Mutation Observer API 用来监视 DOM 变动） 3、Object.observe()（已废弃） 4、nextTick(Node.js 环境)  二、macrotask(宏任务) 1、script(整体代码) 注: 这个很容易忽略掉,就是指script根环境,而且它永远是第一个执行的宏任务(包含了同步的任务). 2、setTimeout 3、setInterval 4、setImmediate 5、IO 6、UI rendering(DOM event)执行机制：
　　（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
　　（2）主线程之外，还存在一个＂任务队列＂（task queue）。只要异步任务有了运行结果，就在＂任务队列＂之中放置一个事件。
　　（3）一旦＂执行栈＂中的所有同步任务执行完毕，系统就会读取＂任务队列＂，执行一个宏任务， 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中 宏任务执行完毕后，再依次执行执行当前微任务队列中的所有微任务，当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）
　　（4）主线程不断重复上面的第三步。
　　任务队列
　　＂任务队列＂是一个先进先出的数据结构，也是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在＂任务队列＂中添加一个事件，表示相关的异步任务可以进入＂执行栈＂了。主线程读取＂任务队列＂，就是读取里面有哪些事件。
　　＂任务队列＂中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入＂任务队列＂，等待主线程读取。
　　所谓＂回调函数＂（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。
　　例子1 案例来源：https://juejin.cn/post/6844903512845860872 setTimeout(function() {    console.log(＂setTimeout＂);  })  new Promise(function(resolve) {    console.log(＂promise＂);  }).then(function() {    console.log(＂then＂);  })  console.log(＂console＂);  1、整体代码script这段代码作为宏任务，进入主线程。 2、先遇到setTimeout，将分发到宏任务Event Queue。 3、接下来遇到了Promise，new Promise立即执行，then函数分发到微任务Event Queue。 4、遇到console.log()，立即执行。 5、整体代码script作为第一个宏任务执行结束，然后会看有哪些微任务？我们发现了then在微任务Event Queue里面，执行。 6、第一轮事件循环结束了，我们开始第二轮循环，当然要从宏任务Event Queue开始。我们发现了宏任务Event Queue中setTimeout对应的回调函数，立即执行。 7.结束。
　　例子2： setTimeout(() => {     console.log(3)     new Promise((resolve, reject) => {         console.log(5)         resolve()     }).then(console.log(6)) }, 0)  setTimeout(() => {     console.log(4) }, 0)  new Promise((resolve, reject) => {     console.log(1)     resolve() }).then(console.log(2)) 输出是1 2 3 5 6 4 分析： 1、前面的两个setTimeout都是宏任务，所以现在宏任务队列有2个任务 2、Promise里面的代码是同步任务，所以现在会马上执行 输出1 3、Promise的then是微任务，所以现在微任务队列有1个任务 4、在执行完同步任务之后，开始执行微任务，也就是console.log(2), 输出2 5、在执行完微任务之后，会执行宏任务，第一个宏任务也就是第一个setTimeout 6、第一个setTimeout会先输出3，然后输出5，因为这两个都是同步任务，然后遇到then，加入微任务队列，宏任务执行完重新开始下一个循环。 7、因为没有同步代码，所以接着执行微任务，此时微任务队列有1个任务(第6步加入), 宏任务队列还有1个任务(第6步执行完了第一个宏任务) 8、执行微任务，输出6 9、再执行宏任务，输出4
　　例子3：//主线程直接执行 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＂)     }) }) //微事件1 process.nextTick(function() {     console.log(＂6＂); }) //主线程直接执行 new Promise(function(resolve) {     console.log(＂7＂);     resolve(); }).then(function() {     //微事件2     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。  分析:     首先浏览器执行js进入第一个宏任务进入主线程, 直接打印console.log(＂1＂)         • 遇到 setTimeout  分发到宏任务Event Queue中         • 遇到 process.nextTick 丢到微任务Event Queue中         • 遇到 Promise， new Promise 直接执行 输出 console.log(＂7＂);         • 执行then 被分发到微任务Event Queue中          •第一轮宏任务执行结束，开始执行微任务 打印 6,8         •第一轮微任务执行完毕，执行第二轮宏事件，执行setTimeout         •先执行主线程宏任务，在执行微任务，打印＂2,4,3,5＂         •在执行第二个setTimeout,同理打印 ‘9,11,10,12’         •整段代码，共进行了三次事件循环
　　误区
　　nodejs事件循环和浏览器的事件循环不一样的。  浏览器的Event loop是在HTML5中定义的规范，而node中则由libuv库实现