requestAnimationFrame: what exactly is the timestamp?

requestanimationframe react
requestanimationframe timer
requestanimationframe parameters
requestanimationframe vs settimeout
requestanimationframe typescript
angular requestanimationframe
requestanimationframe react native
requestanimationframe reset timestamp

I have always thought that timestamp used by requestAnimationFrame is the same as usual timestamp in JavaScript, that is number of milliseconds since January 1st, 1970. Today I have captured the timestamps to verify and found that the RAF timestamp are probably measured since the start of page loading. What precisely are the timestamps measured from?

The test code:

<p id="output"></p>

var i = 0;
var start = null;
var times = [];
var dur = 5000;

function step(timestamp) {
 if (start===null) start = timestamp;
 times[i++] = timestamp;
 if (timestamp-start<=dur) {
  requestAnimationFrame(step);
 } else {
  document.getElementById('output').innerHTML = times.join('<br>');
 }
}

requestAnimationFrame(step);

gives results like this:

158.52126457412882
183.12243595205535
199.52116819316421
...

in all RAF capable browsers.

Window.requestAnimationFrame(), requestAnimationFrame() is a JavaScript method for creating be used in place of setTimeout/ setInterval for animations, but how exactly do we go The callback function is automatically passed a timestamp indicating the  When callbacks queued by requestAnimationFrame() begin to fire multiple callbacks in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload. This timestamp is a decimal number, in milliseconds, but with a minimal precision of 1ms (1000 µs).

Finally, I found the answer in an article by Paul Irish and the specification of High Resolution time:

requestAnimationFrame API: now with sub-millisecond precision

High Resolution Time

The rAF time is "measured relative to the start of navigation of the document", that is relative to the "navigationStart attribute of the PerformanceTiming interface".

Understanding JavaScript's requestAnimationFrame() method for , The Timestamp that is passed into your callback function is changing from a typical Date.now() -like timestamp to a high-resolution measurement of floating point  requestAnimationFrame() to the rescue. It is for the above reasons requestAnimationFrame() was introduced. The method in a nutshell allows you to execute code on the next available screen repaint, taking the guess work out of getting in sync with the user's browser and hardware readiness to make changes to the screen.

MDN says:

The callback has one single argument, a DOMHighResTimeStamp, which indicates the current time (the time returned from performance.now() )

And this is what performance.now() returns:

The returned value represents the time elapsed since the time origin.

The time origin is a standard time which is considered to be the beginning of the current document's lifetime.

Stop requestAnimationFrame, requestAnimationFrame was one of the things that scared me as a you pass callback function to requestAnimationFrame , rAF passes timestamp argument CSS pixel is actually pixel density value, which means how much  What exactly is the "time when requestAnimationFrame() starts to execute callback functions."? From my experiments it is somewhat close to page load. If I call requestAnimationFrame right away - the first timestamp is somewhat close to zero ms, if i call it in 5 seconds since page load - timestamp value will be close to 5000ms.

requestAnimationFrame API: now with sub-millisecond precision, requestAnimationFrame takes one argument, simply a callback that has two takes an argument that is an ultra-accurate timestamp of when it would in the next, what would I define as the ideal duration of that animation? requestAnimationFrame and High Resolution Timestamps While we’re spending some time talking about requestAnimationFrame it’s worth noting to how callbacks are handled. The parameter passed to your callback function is a high resolution timestamp, accurate to a fraction of a millisecond.

JavaScript rAF (requestAnimationFrame) in nutshell, getElementById('p2'); requestAnimationFrame(function (timestamp) get visible at exactly the same time, so it would be strange if the timestamps were different. Using requestAnimationFrame. There used to be just one way to do a timed loop in JavaScript: setInterval(). If you needed to repeat something pretty fast (but not as-fast-as-absolutely-possible like a for loop), you'd use that.

Cool Tricks with Animations Using requestAnimationFrame, You now have help in the form of the requestAnimationFrame function that you to create smooth and fluid animations in JavaScript withoutyou actually having to Below is the slightly different callback function signature with the timestamp  const loop = timestamp => { this._inFrame = true this._runRenderTasks(timestamp) this._renderNodes(timestamp) // If any tasks are left to run, continue the animation loop.

Comments
  • From the docs: "The callback has one single argument, a DOMHighResTimeStamp, which indicates the current time for when requestAnimationFrame starts to fire callbacks."
  • "In the case of rAF it starts to count from when rAF is used. The first time stamp may be null." This not true. Try to add alert('paused') or so BEFORE the first call of RAF. The alert blocks script and if you click it about 5 s later, the first value in times array is about 5000...
  • @LeosOndra see update (I had more faulty implementations in mind - reworded)
  • But, requestAnimationFrame(t => console.log(t === performance.now())) returns false in Chrome and FF.