Event Loop 精通六问

前端

2023-11-12 22:47:10

一直想写一篇关于 Event Loop 的文章，前不久发现 CNode 上有位同学写了一篇原理分析的文章很详细，这里我就不献丑了。本文就拿出六道题来补充一下，放出一张我认为非常直观的图。

六道题

Event Loop 是什么？

Event Loop 是 JavaScript 运行时用来处理事件的一种机制。它是一个不断循环的函数，每当有事件发生时，Event Loop 就会把该事件添加到一个队列中，然后依次执行队列中的事件。
宏任务和微任务是什么？

宏任务和微任务都是 Event Loop 中的两种任务类型。宏任务包括那些需要较长时间才能完成的任务，比如函数执行、setTimeout()、setInterval() 等。微任务包括那些不需要花费大量时间就能完成的任务，比如事件回调函数、Promise.then() 等。
宏任务和微任务的执行顺序是怎样的？

宏任务和微任务的执行顺序是先执行宏任务，再执行微任务。也就是说，当 Event Loop 中有一个宏任务正在执行时，所有的微任务都会被排队等待，直到该宏任务执行完毕后，所有的微任务才会依次执行。
浏览器渲染是什么？

浏览器渲染是指浏览器将 HTML、CSS 和 JavaScript 等代码转换成可视化页面的过程。浏览器渲染主要包括解析 HTML 代码、构建 DOM 树、计算样式和布局、绘制页面等步骤。
消息队列是什么？

消息队列是 Event Loop 中的一个队列，用于存放需要执行的微任务。当 Event Loop 中有一个宏任务正在执行时，所有的微任务都会被添加到消息队列中。当宏任务执行完毕后，Event Loop 会从消息队列中取出所有的微任务并依次执行。
如何避免 Event Loop 过载？

为了避免 Event Loop 过载，可以做以下几件事：
- 使用 setImmediate() 或 Promise.then() 等异步函数来处理耗时较长的任务，避免阻塞 Event Loop。
- 减少不必要的 DOM 操作，因为 DOM 操作非常耗时，可能会阻塞 Event Loop。
- 使用 requestAnimationFrame() 来处理动画和图形操作，requestAnimationFrame() 会在浏览器渲染完成后执行，可以避免阻塞 Event Loop。