javascript 说一下事件循环机制（node、浏览器）

一、为什么会有Event Loop
JavaScript 的任务分为两种同步和异步，它们的处理方式也各自不同，同步任务是直接放在主线程上排队依次执行，异步任务会入任务队列中，若有多个异步任务则需要在任务队列中排队等待，任务队列类似于缓冲区，任务下一步会被移到调用栈然后主线程执行调用栈的任务。
调用栈：调用栈是一个栈结构，函数调用会形成一个栈帧，帧中包含了当前执行函数的参数和局部变量等上下文信息，函数执行完后，它的执行上下文会从栈中弹出。
Javascript 是单线程的，单线程是指js引擎中解析和执行js代码的线程只有一个（主线程），每次只能做一件事情，然而ajax请求中，主线程在等待响应的过程中回去做其他事情，浏览器先在事件表注册ajax的回调函数，响应回来后回调函数被添加到任务队列中等待执行，不会造成线程阻塞，所以说js处理ajax请求的方式是异步的。
综上所述，检查调用栈是否为空以及讲某个任务添加到调用栈中的过程就是event loop,这就是javascript实现异步的核心。
二、浏览器中的Event Loop
2.1 Micro-Task与Macro-Task
浏览器端事件循环中的异步队列有两种：macro(宏任务)队列和micro(微任务)队列。
常见的宏任务：setTimeout、setInterval、script(整体代码)、I/O操作、UI渲染等。
常见微任务：new Promise().then(回调)、MutationObserve等。
2.2 requestAnimationFrame
requestAnimationFrame也属于异步执行的方法，但该方法既不属于宏任务，也不属于微任务。按照mdn中定义：window.requestAnimationFrame()告诉浏览器-你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前 执行
requestAnimationFrame是GUI渲染之前执行，但在微任务之后，不过requestAnimationFrame不一定会在当前帧必须执行，由浏览器根据当前的策略自行决定在哪一帧执行。

1. 检查宏任务队列是否为空，非空则到2，为空则到3
2. 执行宏任务中的一个任务
3. 继续检查微任务队列是否为空，若有则到4，否则到5
4. 取出微任务中的任务执行，执行完成返回到步骤3
5. 执行视图更新
   当某个宏任务执行完后，会查看是否有微任务队列。如果有，先执行微任务队列中的所有任务，如果没有，会读取宏任务队列中排的最前的任务，执行宏任务的过程中，遇到微任务，依次加入微任务队列。栈空后，再次读取微任务队列里的任务，依次类推。