La vitesse de 'ceci' vs une variable cachée en javascript?

Question

Je ne suis généralement pas trop préoccupé par les micro-optimisations, jusqu'à ce qu'il s'agisse de la performance javascript UI (en particulier sur mobile) et de garder tout sous les 16.666666667ms saints pour obtenir ce 60fps lisse ininterrompu.

J'exécute une fonction tick de requestAnimationFrame jusqu'à ce qu'une condition soit remplie, et elle repose sur des valeurs telles que this.velocity, this.translateX etc qui sont définies sur l'instance en cours. Ma question est, devrait ou devrait utiliser une version mise en cache de this comme dans var _this = this; déclaré en dehors de la coche plutôt que de se référer à «tout cela partout être plus rapide». Pour être clair, je vous appelle cela plus que quelques fois .... Heres du code:

swipeIt.prototype.tick = function() { 
    if (Math.abs(this.translateX) < (+this.elWidth*1.2 && this.velocity > 6)) { 


     this.velocity = this.velocity*1.15; 
     this.translateX = (this.dir === 'left') ? this.translateX - this.velocity : this.translateX + this.velocity; 

     requestAnimationFrame(function() { 
      _this._update(_this.updateCb); 
      _this.tick(); 
     }); 

    } else { 
     //.... 
    } 
} 

d'autres suggestions sur l'optimisation de cela plus le bienvenu, est la première fois im vraiment donner un aller solide . à votre santé.

Answer 1

Non, vous ne verrez aucune amélioration par rapport à cela. S'il y a une différence, ce sera une minuscule diminution de performance, à cause de la déclaration supplémentaire.

Vous avez probablement vu quelque chose comme:

var $this = $(this); 

dans jQuery. Cela a beaucoup de sens, car $(this) est cher à évaluer, donc le code qui est jonché de $(this) peut être grandement amélioré en l'affectant à une variable et en utilisant cette variable partout à la place. Dans votre cas, cependant, il n'y a rien de coûteux à évaluer pour économiser. Accès _this prend autant de temps que l'accès this.