Comment optimiser ce js (maintenant CPU est plus de 40% lorsque la page est ouverte)

Question

J'ai cette partie de JavaScript sur ma page et il charge considérablement le processeur. Est-il possible d'optimiser le code? (J'utilise jQuery, donc les solutions jQuery seront bien)

function Particle() { 

      this.particleContainerWidth = $('#particle-container').width() - 100; 
      this.particleContainerHeight = $('#particle-container').height() - 100; 

      this.path = 'img/'; 
      this.images = ['particle1.png', 'particle2.png', 'particle3.png', 'particle4.png']; 

     // Randomly Pick a Particle Model 
      this.image = this.images[randomInt(this.images.length)]; 
      this.file = this.path + this.image; 

     // Create a Particle DOM 
      this.element = document.createElement('img'); 

      this.speed().newPoint().display().newPoint().fly(); 
     }; 

     // Generate Random Speed 
     Particle.prototype.speed = function() { 
      this.duration = (randomInt(10) + 5) * 1100; 
      return this; 
     }; 

     // Generate a Random Position        
     Particle.prototype.newPoint = function() { 
      this.pointX = randomInt(this.particleContainerWidth); 
      this.pointY = randomInt(this.particleContainerHeight); 

      return this; 
     }; 

     // Display the Particle 
     Particle.prototype.display = function() { 
      $(this.element) 
       .attr('src', this.file) 
       .css('position', 'absolute') 
       .css('top', this.pointY) 
       .css('left', this.pointX); 
      $('#particle-container').append(this.element); 

      return this; 
     }; 

     // Animate Particle Movements 
     Particle.prototype.fly = function() { 
      var self = this; 
      $(this.element).animate({ 
       "top": this.pointY, 
       "left": this.pointX 
      }, this.duration, 'linear', function(){ 
       self.speed().newPoint().fly(); 
      }); 
     }; 

     function randomInt(max) { 
     // Generate a random integer (0 <= randomInt < max) 
      return Math.floor(Math.random() * max); 
     } 

     $(function(){ 

      $('body').append('<div id="particle-container"></div>'); 

      var total = 8; 
      var particles = []; 

      for (i = 0; i < total; i++){ 
       particles[i] = new Particle(); 
      } 
     }); 

Answer 1

Vous ne pouvez pas faire moins JavaScript de votre consommer CPU. Cela est régi par la priorité de l'application en cours d'exécution dans le noyau du système d'exploitation. Le mieux que vous pouvez espérer est de réduire le temps d'exécution.

Pour améliorer votre efficacité d'exécution, limitez votre utilisation du prototype et cessez d'attribuer des valeurs aux propriétés. Cette méthode de codage est devenue populaire car elle est extrêmement propre et facile à lire, mais elle est horriblement rétrograde à exécuter.

Si vous êtes capable de coder en utilisant uniquement des variables pour l'affectation, si les instructions pour les décisions, et pour les boucles pour boucler l'exécution de votre code sera beaucoup plus rapide. Cela vous demandera d'écrire plus de code, cependant, et ce ne sera pas si joli. Pour améliorer les performances de sortie, écrivez tous les segments de sortie dans un index d'un tableau et n'utilisez qu'une seule méthode de jointure lorsque toutes les sorties sont créées et une seule méthode innerHTML pour afficher ce texte sur la page. Cela réduira jusqu'à 4 fois l'exécution de la sortie.

Answer 2

Avez-vous pensé à implémenter ceci avec une version <canvas>? Cela ne marchera pas dans IE directement, bien sûr, et je ne suis pas sûr que ce soit plus rapide ou plus lent. Vous pouvez également essayer avec Processing.

Answer 3

Cela nécessiterait beaucoup de modifications et de réécritures, mais vous pouvez créer une nouvelle fonction d'accélération pour jquery et l'afficher pour l'animer. Ensuite, chaque particule Vous avez serait juste une fois émis avec Animate() avec votre fonction d'accélération et la fonction doit être basée sur les:

• aléatoire
• heure actuelle (new Date()) modulo un certain nombre
• un singleton tenant des directions individuelles

idées:

Supposons que vous ne voulez pas changer votre code, vous c Essayez de définir la particule à piloter avec un délai d'attente aléatoire lors de la première exécution de fly(). Cela pourrait changer la façon dont tout est exécuté. Aucune idée si cela aide ou le rend plus lent si;)

La deuxième chose est la qualité. jquery animate le fait aussi en douceur. Vous pouvez déplacer vos particules au lieu d'animer et simplement réduire la distance pour diminuer et augmenter la vitesse et utiliser setTimeout pour le faire avancer au même rythme que maintenant.