Is Tween perceived performance ever better than styling elements with JavaScript?

[Halcyon]

In the tests I have run, it seems JavaScript is a bit faster, but I'm wondering if it's possible to do this faster. So let's say I am repeatedly setting the width of health/mana/status bars and I want to do this as efficiently as possible. Should I use element.style.width or should I use Tween.to over a brief duration of half a second?

 

In my tests if I Tween using 0 duration (or .set) it takes about twice as long as element.style.width. If I use a half second Tween, my test reports that Tweens are much faster (8ms vs 43 ms), but this isn't a fair comparison because the test is only measuring how long it takes for the Tween to start. This makes me wonder if using Tweens are magically somehow faster in practice in terms of perceived performance... like maybe there's less initial performance load?

 

Or is element.style.width always faster no matter what? Thoughts?

 

Edit: made a codepen to make this easier to test.

 

See the Pen KelFk by maelfyn (@maelfyn) on CodePen

[Carl]

I'm not really sure I follow the question.

Setting the style.width directly should be quicker than going through the process of creating a tween that basically does the same thing.

In the case of a tween, at the very least you need to

 

- create a new JavaScript object (the tween itself)

- find the existing values of the properties you are tweening

- record the existing values of the properties you are tweening

- start tweening.

 

So, yes, it shouldn't be surprising that bypassing all that is more efficient.

And in the case of a set(), even though the tween doesn't have a duration, the engine still needs to query and store the existing values before setting the new values.

 

However, you should read and watch the videos here to see how TweenLite incorporates some very important techniques to achieve super-fast real and perceived performance: http://greensock.com/gsap-1-12-0

 

Let me know if you need more info or if I'm misunderstanding something.

[Halcyon]

Thanks Carl. I think this post is a sanity check more than anything. Greensock's has a lot of performance nuances, so I like to check on these details. This video helps a lot. Thanks!

[Carl]

You're very welcome. We love knowing that people appreciate the fine details behind the scenes. Happy Tweening!