requestAnimationFrame回调函数的参数到底是什么时间

requestAnimationFrame回调函数的参数表示 requestAnimationFrame() 开始执行回调函数的时刻(错误)

在MDN中的对该参数的描述是:

DOMHighResTimeStamp 参数会传入回调方法中,它指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。在同一个帧中的多个回调函数,它们每一个都会接受到一个相同的时间戳,即使在计算上一个回调函数的工作负载期间已经消耗了一些时间。该时间戳是一个十进制数,单位为毫秒,最小精度为 1ms(1000μs)。
当你的动画需要更新时,为下一次重绘所调用的函数。该回调函数会传入 DOMHighResTimeStamp 参数,该参数与 performance.now() 的返回值相同,它表示 requestAnimationFrame() 开始执行回调函数的时刻。

测试案例A:验证上面所说: 回调函数参数与performance.now()返回值是否相同。测试脚本如下:

js 复制代码
 window.requestAnimationFrame((rafTime) => {
   console.log(rafTime, performance.now()) // 输出 9.6 13
 })

反复执行上述代码,发现rafTime和performance.now()每次输出的值都不一样,每次相差也不一致。

测试案例B:在案例A的前面加上一个耗时任务,在观察rafTime和performance.now()输出的值。测试脚本如下:

js 复制代码
for (let i = 0; i < 10000; i++) {
            console.log(0)
        }
        window.requestAnimationFrame((rafTime) => {
            console.log(rafTime, performance.now()) // 输出 7.7 181.69999999925494
        })

测试结果发现:当加上耗时任务以后,rafTime和performance.now()的值相差更大了。

由此,可以确认MDN上对requestAnimationFrame回调函数的参数描述是错误的。那么这个值到底指什么时间呢?

requestAnimationFrame回调函数的参数表示当前帧开始渲染的时间(正确)

在其他的文档中,对该参数的描述如下:

那么该描述对不对呢?我们该怎么去验证它呢?

首先,我们看下MDN的英文原版描述:

上面说的是回调函数的参数是上一帧渲染的结束时间,在window下等于document.timeline.currentTime,该时间戳类似在回调函数开始时调用performance.now,但从来都不是相同的值。(此时,认识到英语对于程序员来说真的很重要!!!)

又学到了一个新知识:document.timeline.currentTime

测试案例C:验证rafTime和document.timeline.currentTime是否输出一致。测试脚本如下:

js 复制代码
 for (let i = 0; i < 10000; i++) {
            console.log(0)
        }
        window.requestAnimationFrame((rafTime) => {
            console.log('rafTime:', rafTime)
            console.log('document.timeline.currentTime: ', document.timeline.currentTime)
            console.log('performance.now: ',  performance.now()) 
        })

输出结果如下:

现在,我们来了解下document.timeline.currentTime

Document 接口的 timeline 只读属性表示当前文档的默认时间轴。此时间轴是 DocumentTimeline (en-US) 的一个特殊实例,它会在网页加载时自动创建。

此时间轴对于每个文档(document)来说都是唯一的,并在文档的生命周期中保持不变,包括调用 Document.open()。

测试案例D: 通过console.log和性能面板分析回调函数的参数是否与每一帧开始时间一致。

上图中,展示当前帧的开始时间是944.36ms,时长是16.67ms

上图中,展示的是这一帧中requestAnimationFrame的执行时间,大致在949.9ms。

上图中,这一帧requestAnimationFrame回调函数执行后的输出内容。

最后得出:

  • requestAnimationFrame回调函数的参数rafTime接近一帧的开始时间。
  • performance.now()输出的值接近回调函数的开始执行时间。
相关推荐
程序员大阳11 小时前
副队长JavaScript教程(50)-DOM:网页开发的起点
javascript·dom·es·节点·概念·document·关系
香芋芋圆16 小时前
iD-editor 详解|OSM官方在线编辑器,基于D3.js的轻量地图编辑器
开发语言·javascript·编辑器
晗夜未央17 小时前
任务队列反复失败,先分清重试、阻塞和结果待核对
开发语言·javascript
jktantan18 小时前
每个节点 41 字节:把一棵百万节点树拆进 14 个 typed array
前端·javascript·vue.js·算法·typescript
我命由我1234519 小时前
访客系统形式(有用户概念、无用户概念)
java·开发语言·前端·javascript·python·产品运营·产品经理
程序员大阳19 小时前
副队长JavaScript教程(65)-详解JSON:轻量级数据交换格式
javascript·json·序列化·反序列化·stringify·parse
paopaokaka_luck21 小时前
基于springboot+vue的益暖微光公益服务平台(DeepSeek公益助手、善款信息追溯、志愿服务积分闭环、ECharts运营分析、活动状态自动流转)
java·前端·javascript·spring boot·mysql·架构·echarts
栀椩21 小时前
Electron 内嵌页面跨域问题(CORS/PNA)解决全记录
前端·javascript·electron
SEO_juper21 小时前
Chrome 扩展一键查看当前页面 SEO 信息:不用切页面,点一下全出来
前端·javascript·chrome
Highcharts.js21 小时前
CSUN 2026|Highcharts无障碍数据与AI分享
javascript·人工智能·数据分析·highcharts·图表开发