requestAnimationFrame and animation stacking

Skip to first unread message

Paul Irish

Nov 2, 2011, 10:13:42 AM11/2/11
hi ho!

(i originaly shared this with the jquery development team but figured it'd be of interest to more than just them)

I caught up with james robinson, the engineer behind chrome's rAF (officially pronounced "raff" these days) implementation..

He was familiar with the jQuery story.. (How people were using setInterval with it and animations were stacking up while in background tabs. )

I brought up someones idea regarding having rAF flush its stack periodically when in the background. Turns out its not a new idea. :)

Rough notes...
  • flushing rAF
    • browser engineers are aware of the stacking
    • mozilla was flushing every 1s in background, then moved to exponential backoff (with upper bound), dunno about now
    • chrome doesnt flush now but is open to it
    • msft seemed adamant about not flushing
  • libraries and flushing rAF
    • they should try flushing behavior.. maybe with backoff
    • if it makes sense, we can convince msft that this is the best direction
  • element argument
    • only in webkit. may be removed from spec
    • only checks display:none (out of render tree).. scrolled out of view isnt done
    • order gets weird when you have 3 rAFs 
      • given ABC.. lets say A is out of view. in B's rAF callback, it scrolls A back into view.. Now what rAF callbacks fire next?  CAB? ACB? ABC?
      • does it matter?
  • discussions mostly happened on w3c's public-webperf ~6mo ago
  • high resolution timer
    • jamesr is interested in using a high-res timer
    • mozilla tried but broke sites who expect to return an integer (they were casting to strings)
    • already used in window.performance stats
    • could be in Audio API and Graphics APIs 
    • also avoids when system clocks go backwards (via network update)
    • but devs will be confused if they compare this timer to

update: the two editors (jamesr of webkit, heycam of mozilla) were discussing rAF and indicated they want our feedback so they can change the spec.

todo for jquery:
  • implement our own rAF stack flushing (maybe with exponential backoff)
  • determine if that behavior is best 
    • currently msft is least excited about that
    • imagine every background tab is flushing their rAFs..
  • tell public-web-perf what we think
Reply all
Reply to author
0 new messages