Using requestAnimationFrame for improved perfs

[regiskuckaertz]

Use recent browsers' support for the requestAnimationFrame API will prevent superfluous window repaints and therefore increase the overall performance of the page.

Some background

• Leaner, Meaner, Faster Animations with requestAnimationFrame
• Rendering: repaint, reflow/relayout, restyle

[davatron5000]

So I see your logic here and I've thought about this myself, but right now, we only calculate on resize and orientation change. Real world users rarely resize and change their orientation, so to me it makes more sense to bind to resize than it does to requestAnimationFrame. rAF would cause consistent recalculation whereas resize just calcs when that action is being performed.

Thoughts?

[regiskuckaertz]

Hi Dave, well if you take a look at line 56, you'll notice that rAF is only triggered on resize or orientationchange, i.e. nothing changes regarding the frequency of calculations. The only thing that changes is that the calculations will happen only when the browser decides a reflow/repaint is necessary, which supposedly will reduce screen freezes on an otherwise busy web page. I agree with you, the difference might be futile on its own.

[davatron5000]

Finally got around to taking a look at this in Timeline Inspector and YAY! Huge improvement. Looks like I can't directly merge this in right now, but I'll take a look at getting these improvements in. Thanks.

[regiskuckaertz]

Yeah! You're welcome, glad you could have a look at it.