requestAnimationFrame 与 requestIdleCallback 对比

提示：记录工作中遇到的需求及解决办法

前言

看过埋点库 sunshine-track ，很多人疑惑为啥批量上报埋点信息的时候，用的是 requestIdleCallback 而不是 requestAnimationFrame，今天就解答一下

sunshine-track 源码学习：https://github.com/sanxin-lin/sunshine-track

提示：以下是本篇文章正文内容，下面案例可供参考

一、背景与问题场景

在前端性能监控领域，埋点信息上报是重要的数据收集手段。当我们需要批量上报用户行为数据时，传统同步上报方案可能导致以下问题：

• 阻塞主线程造成页面卡顿
• 影响关键渲染流程的执行
• 造成不必要的性能损耗
  

二、核心API对比分析

1. requestAnimationFrame（rAF）
   • 执行时机：每次重绘前（约16.6ms/次）
   • 设计目的：执行与渲染相关的动画逻辑
   • 优先级：高（属于浏览器渲染流水线的一部分）
   • 特点：
     • 保证与屏幕刷新率同步</