对基于Web的动画的FPS进行基准测试？

Question

I'm looking to write a simple frames per second animation benchmark Javascript utility. FPS is probably a lose term here, but ideally something that will let me more accurately compare and measure how different animations (CSS3/canvas/webgl) are performing between browsers and devices. (so not something that just tests specific code - but a JS library thats included in the page and able to do its thing on its own)

And am looking for ideas on how to best approach the subject.

For example I'm hoping that requestAnimationFrame is what I'm looking for - I've been reading about it a bit and it seems that its called every time the browser is available to redraw/animate something right? So by the same logic if (when running an animation) the browser is not available as often (as often as for example in a blank run) - we already have some numbers that we could compare agains right there.

The problem is of course requestAnimationFrame is not supported as widely as I'd like (especially on mobile). Could setInterval be used there somehow? I understand its not as reliable but maybe that could be used to my advantage - for example if I call it 1000 times per second and then compare that agains how many times it was really executed per second - that's already a benchmark of a sort.

The only issue here is that that method would give back measurements for any number of issues, not just animation - for example I can imagine the browser skipping an interval because its doing something in the DOM, etc. etc. You might argue that a browser is a single-process animal so DOM alterations affect animation too - but is that still true if for example a CSS3 animation is GPU hardware accelerated?

Just a theory at the moment - so any ideas are much appreciated! ;-)

Answer 1

看起来它应该很容易适应一组可以在您的特定情况下使用的功能（“做自己的事”）： https : //gist.github.com/1156092