Looping della funzione causa la mancata risposta in javascript

Question

Ecco il codice che ho provato per i fiocchi di neve. Tutto sembra ok ma una volta trascorso il periodo di tempo in cui lo script non risponde significa (rallenta il browser Firefox). Non sono sicuro del motivo per cui ciò dovrebbe accadere. Come posso renderlo reattivo senza causare nulla al browser. Ecco FIDDLE

Come posso fare che lo script reattivo, che non causa alcuna.! Credo di aver fatto un errore nel loop la funzione javascript :( Qualsiasi suggerimento sarebbe grande

Grazie

Javascript:.

// window.setInterval(generateSnow, 0); 
var windowHeight = jQuery(document).height(); 
var windowWidth = jQuery(window).width(); 
function generateSnow() { 
    for (i = 0; i < 4; i++) { 
     var snowTop = Math.floor(Math.random() * (windowHeight)); 
     snowTop = 0; 

     var snowLeft = Math.floor(Math.random() * (windowWidth - 2)); 
     var imageSize = Math.floor(Math.random() * 20); 

     jQuery('body').append(
      jQuery('<div />') 
       .addClass('snow') 
       .css('top', snowTop) 
       .css('left', snowLeft) 
       .css('position', 'absolute') 
       .html('*') 
     ); 
    } 
} 


function snowFalling() { 
    jQuery('.snow').each(function(key, value) { 
     if (parseInt(jQuery(this).css('top')) > windowHeight - 80) { 
      jQuery(this).remove(); 
     } 
     var fallingSpeed = Math.floor(Math.random() * 5 + 1); 
     var movingDirection = Math.floor(Math.random() * 2); 
     var currentTop = parseInt(jQuery(this).css('top')); 
     var currentLeft = parseInt(jQuery(this).css('left')); 
     jQuery(this).css('top', currentTop + fallingSpeed); 
     if (movingDirection === 0) { 
      jQuery(this).css('bottom', currentLeft + fallingSpeed); 
     } else { 
      jQuery(this).css('bottom', currentLeft + -(fallingSpeed)); 
     } 
    }); 
} 

window.setInterval(snowFalling, 15); 
window.setInterval(generateSnow, 1000); 

Answer 1

Stai aggiungendo e rimuovendo sacco di elementi sulla pagina durante il runtime, facendo in modo che i browser aggiornino frequentemente la struttura di quella pagina.

Questo approccio è:

1. la cosa peggiore che puoi fare prestazioni-saggio
2. probabilmente rendendo la caduta del browser in ginocchio una volta abbastanza DIV sono stati generati, rimosso, generato, rimosso, generato, rimosso ... ...

Probabilmente un browser mobile si bloccherà dopo 2 secondi con questa configurazione.

Si consiglia di pre-generare tutti i DIV fin dall'inizio, riutilizzandoli e utilizzando le animazioni CSS o jQuery animate() per ottenere ciò che si sta tentando di fare.

Answer 2

Come menzionato @ZathrusWriter, è necessario riutilizzare gli elementi del fiocco di neve in modo che la memoria non aumenti.

Il motivo per cui il browser inizia a rallentare dopo aver creato un gruppo di fiocchi di neve è dovuto al fatto che JavaScript gestisce la memoria utilizzando uno garbage collector. In questo modo la memoria viene liberata molto più lentamente di quanto stai allocando la memoria per i nuovi fiocchi di neve. Idealmente, si desidera allocare la memoria per tutti i fiocchi di neve una volta.

Fondamentalmente, creare gli elementi per il numero di fiocchi di neve che si desidera sullo schermo in qualsiasi momento. Mettili tutti sullo schermo in posizioni casuali per iniziare. Quindi, una volta che un fiocco di neve diventa fuori schermo o invisibile, quel fiocco di neve è di nuovo utilizzabile. Quindi lo sposterai in alto (possibilmente in un'altra posizione casuale) e lo farà cadere di nuovo come un fiocco di neve (invece di eliminarlo e crearne uno nuovo).

Questo è ad un passo dalla creazione di un emettitore di particelle.