javascript事件循环

异步任务栈分为:

宏任务(macrotask):

• setTimeout
• setImmediate
• setInterval
• MessageChannel
• UI rendering
• 网络I/O以及用户I/O
• network

微任务(microtask):

• process.nextTick
• Promise
• Object.observe
• MutationObserver

事件循环机制

• 执行一个宏任务（栈中没有就从事件队列中获取）
• 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
• 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
• 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
• 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

requestAnimationFrame:会再UI渲染之前执行，微任务执行完之后
requestIdleCallback:会在帧的剩余空闲时间执行，如果传第二个参数超时时间，没有空闲时间的话会强制执行

image.png

宏任务 ---> 微任务 ---> requestAnimationFrame --->UI线程渲染 ---> 宏任务

image.png