2010-04-25 9 views
7

Sto usando Jquery per far scorrere un'immagine attraverso la mia pagina orizzontalmente. L'unico problema è che utilizza una quantità notevole di utilizzo della CPU. Fino al 100% su un laptop single-core in Firefox. Cosa potrebbe causare questo ???Utilizzo CPU Jquery

Jquery

<script> 
    jQuery(document).ready(function() { 

    $(".speech").animate({backgroundPosition: "-6000px 0px"}, 400000, null); 
    }); 

    </script> 

CSS

.speech { 
    /*position:fixed;*/ 
    top:0; 
    left:0px; 
    height:400px; 
    width:100%; 
    z-index:-1; 
    background:url(/images/speech.png) -300px -500px repeat-x; 
    margin-right: auto; 
    margin-left: auto; 
    position: fixed; 
} 

HTML

<div class="speech"></div> 
+0

Crikey davvero? Non mi sono mai imbattuto in un maiale simile alla memoria. Quale browser utilizzate? Non riesco a replicare il problema. Prova la stessa cosa ma non usare un png - prova invece un gif/jpg per vedere se hai lo stesso problema. – Glycerine

+3

Non ha detto che era un maiale della memoria; non è quello che significa l'utilizzo della CPU al 100%. – Pointy

risposta

12

Sta consumando risorse della CPU perché stai chiedendo al browser di ridipingere un'immagine molte volte al secondo per un lungo periodo di tempo. Questo non è gratuito.

+0

+1. nessun voto lasciato. – sepehr

0

Se questo è un problema relativo alla memoria della CPU allora si può annullare il risultato della chiamata di funzione jQuery. Se la chiamata restituisce un oggetto jQuery poi dopo la chiamata, è possibile impostare a nulla:

var tmp = $(".speech").animate({backgroundPosition: "-6000px 0px"}, 400000, null); 
}); 
tmp = null; 

Nota: Se questo è in alcun modo collegato con la perdita di memoria, allora esso ha a che fare con i riferimenti circolari e impostando a null puoi spezzarlo.

Fare un tentativo, mi piacerebbe sapere i risultati se avete il tempo di postare.

+0

Questo non farà del bene. Il problema descritto è uno dei carichi della CPU durante l'animazione. Liberare l'oggetto jQuery dopo l'animazione non influirà sul processo dell'animazione stessa. – Pointy

+0

In questo modo è possibile tralasciare qualsiasi problema relativo alla memoria. Vorrei entrare nei dettagli di implementazione delle funzioni animate e verificare la presenza di problemi, inoltre mi assicurerei che i parametri del contratto di funzione/metodo siano compresi. Se l'animazione è importante nella tua applicazione, ti suggerisco di cercare le librerie JS che si concentrano sulle animazioni. Potrebbe esserci un plugin o un'estensione in jQuery che gestisce l'animazione in un modo migliore. Ci scusiamo per non aver fatto nulla ... a volte abbiamo bisogno di un punto di partenza e di trovare la nostra strada verso il bersaglio dopo aver scartato i fattori uno per uno. – Andreas

11

in caso qualcuno è alla ricerca di una soluzione a elevato utilizzo della CPU durante l'utilizzo di animazioni jQuery (come ero), allora vale la pena notare che jQuery.fx.interval è stato aggiunto a jQuery 1.4.3 in modo da poter controllare la frequenza di intervallo dell'animazione.

Esempio di utilizzo (impostazione di questa a circa 50-70 mantenuto le mie animazioni fluide e ho notato l'utilizzo della CPU è scesa a circa il 10-20%):

jQuery.fx.interval = 50;

+1

questo è tutto - punto. – schellmax