JS事件循环与渲染引擎的关系，揭秘requestAnimationFrame与requestIdleCallback

2023-12-15 12:10:04

浏览器引擎：Event Loop、JS 引擎和渲染引擎的协奏曲

浏览器是一个复杂而强大的软件，负责我们与网络的互动。在浏览器的幕后，三大引擎共同协作，确保无缝的用户体验。了解这些引擎及其相互作用对于优化您的 web 开发至关重要。

Event Loop：事件管理大师

想象 Event Loop 是一个不眠不休的指挥家，协调着浏览器的所有异步事件。当用户与页面交互或到达新的任务时，Event Loop 会将这些任务添加到任务队列中。该队列以先进先出的方式工作，这意味着最早添加的任务将首先执行。

一旦 Event Loop 检测到任务队列中有新任务，它就会开始处理它们。每个任务都封装在称为回调函数的代码片段中。当 Event Loop 执行回调时，它会传递相关事件信息。

JS 引擎：JavaScript 代码执行者

JS 引擎是浏览器的 JavaScript 代码执行引擎。当 JavaScript 代码遇到时，JS 引擎会将其解析为一系列小指令。这些指令被发送到 CPU，CPU 执行指令并返回结果。JS 引擎将这些结果返回给浏览器，浏览器将它们反映在页面上。

渲染引擎：内容的可视化呈现

渲染引擎是浏览器的视觉向导，将 HTML、CSS 和 JavaScript 代码转换为可视内容。渲染过程从解析 HTML 文档结构开始，生成 DOM（文档对象模型）树。CSS 样式表被处理，生成 CSSOM（CSS 对象模型）树。

DOM 树和 CSSOM 树合并在一起，形成渲染树，它了页面元素的布局。渲染引擎根据渲染树计算每个元素的位置和大小，并将其绘制到屏幕上。

引擎协作：无缝浏览

这三个引擎紧密协作，实现浏览器的平稳运行。Event Loop 协调异步事件，将 JavaScript 任务传递给 JS 引擎。JS 引擎执行代码并返回结果，Event Loop 将这些结果传递给渲染引擎。渲染引擎更新页面的可视表示，反映了 JS 代码更改。

requestAnimationFrame 和 requestIdleCallback：空闲时间优化

requestAnimationFrame 和 requestIdleCallback 是两个重要的浏览器 API，允许开发人员在浏览器空闲时安排任务。requestAnimationFrame 在每次屏幕重新渲染后触发任务，提供高刷新率。requestIdleCallback 在浏览器空闲时触发任务，这对于不需要高刷新率的任务很有用。