EventLoop宏任务与微任务剖析

JavaScript 是单线程的语言，同一时间只能做一件事情。这意味着如果一个任务非常耗时，那么其他任务就必须等待它完成才能执行。

EventLoop

为了解决这个问题，浏览器提供了一套机制来处理一些特殊的任务，这些任务不会阻塞主线程的执行，而是会放到一个叫做EventLoop的任务队列中等待执行。EventLoop会不断轮询这个任务队列，当发现有任务可以执行时，就将其取出并执行。

宏任务

宏任务是指那些需要花费较长时间才能完成的任务，比如执行一个函数、发送一个网络请求或者执行一个动画。宏任务会放到EventLoop的任务队列中等待执行。

微任务

微任务是指那些可以很快完成的任务，比如执行一个事件处理程序或者更新DOM。微任务会先放到一个微任务队列中，然后在执行完当前的宏任务之后再执行。

EventLoop如何工作

EventLoop会不断轮询任务队列，当发现有任务可以执行时，就将其取出并执行。如果当前的任务是一个宏任务，那么EventLoop会先执行这个宏任务，然后再去执行微任务队列中的任务。如果当前的任务是一个微任务，那么EventLoop会直接执行这个微任务，而不会去执行宏任务队列中的任务。

setTimeout和setInterval

setTimeout和setInterval都是用来设置定时器的函数。setTimeout会设置一个单次定时器，在指定的时间后执行一次指定的函数。setInterval会设置一个循环定时器，在指定的时间间隔内不断执行指定的函数。

setTimeout和setInterval都是宏任务，因此它们会放到EventLoop的任务队列中等待执行。

requestAnimationFrame

requestAnimationFrame是一个用来请求浏览器在下一帧执行指定的函数的函数。requestAnimationFrame是微任务，因此它会放到微任务队列中等待执行。

Promise

Promise是一个用来处理异步操作的类。Promise有三种状态：pending（等待）、fulfilled（已完成）和rejected（已拒绝）。

当一个Promise处于pending状态时，它会注册一个回调函数。当Promise的状态变成fulfilled或rejected时，这个回调函数就会被执行。

Promise是微任务，因此它们会放到微任务队列中等待执行。

结论

EventLoop是浏览器用来处理任务的一种机制。EventLoop会不断轮询任务队列，当发现有任务可以执行时，就将其取出并执行。宏任务是指那些需要花费较长时间才能完成的任务，比如执行一个函数、发送一个网络请求或者执行一个动画。微任务是指那些可以很快完成的任务，比如执行一个事件处理程序或者更新DOM。