Question

I see a lot of code in some popular Javascript libraries that often create new objects and abandon the old ones, like here (this is from https://github.com/nefD/impact-tween):

if ( this.tweens.length > 0 ) {
    var currentTweens = [];
    for ( var i = 0; i < this.tweens.length; i++ ) {
        this.tweens[i].update();
        if ( !this.tweens[i].complete ) currentTweens.push(this.tweens[i]);
    }
this.tweens = currentTweens;

My question to the experts is whether this hinders performance of comparatively slow mobile apps built using Javascript. I mean, would reusing existing objects as much as possible have a noticeable impact on the performance?

This is a theoretical question, I know that if I want to speed up my program I need to find a bottleneck in my code and optimise that rather than theorising about performance in general.

Answer 1

If you can you should re-use both the DOM elements and JS objects.

Creating and abandoning isn’t a low cost operation and on mobile where processors are slower and there’s less memory you want to avoid garbage collection for as long as possible.

Estelle Weyl’s presentation from Velocity EU has some slides on this – http://standardista.com/velocity/#slide1