2010-04-25 31 views
7

Estoy usando Jquery para hacer que una imagen se desplace horizontalmente por mi página. El único problema es que usa una gran cantidad de uso de la CPU. Hasta 100% en una computadora portátil de un solo núcleo en Firefox. ¿Qué podría causar esto?Uso de la CPU de 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 realmente? Nunca me he encontrado con tanta memoria. ¿Qué navegador estás usando? No puedo replicar el problema. Pruebe lo mismo, pero no use un png: intente con un gif/jpg en su lugar y vea si tiene el mismo problema. – Glycerine

+3

Él no dijo que era un cerdo de la memoria; eso no es lo que significa el 100% de utilización de la CPU. – Pointy

Respuesta

12

Está utilizando los recursos de la CPU porque le pide al navegador que vuelva a pintar una imagen muchas veces por segundo durante un largo período de tiempo. Eso no es gratis.

+0

+1. no queda voto – sepehr

0

Si se trata de una cuestión relacionada con la memoria de la CPU a continuación, puede anular el resultado de la llamada a la función jQuery. Si la llamada devuelve un objeto jQuery continuación, después de la llamada se puede establecer a nulo:

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

Nota: Si se trata de ninguna manera relacionada con la pérdida de memoria, entonces tiene que ver con las referencias circulares y estableciendo anular puede romperlo.

Pruébelo, me gustaría saber los resultados si tiene tiempo para publicar.

+0

Eso no servirá de nada en absoluto. El problema descrito es uno de carga de CPU durante la animación. Liberar el objeto jQuery después de la animación no afectará el proceso de la animación en sí. – Pointy

+0

Para que pueda omitir cualquier problema relacionado con la memoria. Me gustaría ir a los detalles de implementación de la función animada y verificar si hay problemas, también me aseguraría de que se entiendan los params de contrato de función/método. Si la animación es importante en su aplicación, le sugiero que busque bibliotecas JS que se centren en animaciones. Puede haber un complemento o extensión en jQuery que maneje la animación de una mejor manera. Perdón por no hacer nada bueno ... a veces necesitamos un lugar para comenzar y encontrar nuestro camino hacia el objetivo después de descartar los factores uno por uno. – Andreas

11

En caso de que alguien está buscando una solución para el uso intensivo de la CPU cuando se utiliza animaciones jQuery (como yo), entonces vale la pena señalar que jQuery.fx.interval se agregó a jQuery 1.4.3 para que pueda controlar la tasa de intervalo de la animación.

Ejemplo de uso (este valor está a alrededor de 50-70 mantuvieron mis animaciones suaves y me di uso de la CPU se dejó caer a aproximadamente 10-20%):

jQuery.fx.interval = 50;

+1

eso es todo - punto. – schellmax