jQuery performance, .css o addClass

Tengo un gran código jQuery y estoy pensando en la velocidad de mis funciones. Cuando se hace clic en un elemento (mousedown), necesito asignar una imagen como fondo. Puedo hacer esto en 2 formas:jQuery performance, .css o addClass

$('#element li.class').css({"background":"someimageURL"});

$('#element li.class').addClass("someclass");

donde "someclass" tiene la imagen de fondo CSS real. La función de bruja funciona mejor en este caso.

¿Hay alguna manera de probar la velocidad de varias funciones?

Gracias

Fuente

2010-02-25 Mircea

No creo que su prudente sustituir uno por el otro. El uso del método .css codifica con fuerza el estilo del elemento DOM y, en caso de que quiera salirse con la suya con el estilo (por ejemplo, cambios en la resolución de la pantalla), sería realmente difícil. Sin embargo, los métodos .addClass y .removeClass manejan eso bastante bien. – thethakuri

estoy casi seguro .addClass() sería el más rápido de los dos. Esto implica, básicamente, virar en otro nombre de clase para el elemento, mientras que la alternativa requeriría iterar a través de los estilos de elementos y establecer muchas reglas explícitas.

Establecer un par de reglas css a través de $.css() es probable que no tenga nada de qué preocuparse, pero si se encuentra configurando muchas, a menudo, es hora de crear una clase y aplicar/eliminar eso según sea necesario.

He extraído la lógica de ambos métodos en una sola ubicación para que la revise si lo desea.

http://pastie.org/842738

Fuente

2010-02-25 18:24:14 Sampson

Además, no relacionado con la velocidad/el rendimiento, es mucho más fácil cambiar una clase CSS que el código fuente JS para cambiar un estilo más adelante;) – casraf

La implementación de "addClass" no es tan elegante como habría pensado. Hace una gran cantidad de re-escaneo de la cadena de clase al agregar múltiples clases. Para valores cortos de className que probablemente no sean un problema. – Pointy

Thanx Jhonathan. Veré tu enlace. También creo que addClass es más rápido. – Mircea

Añadir clase es absolutamente más rápido, vea esta prueba de rendimiento de $.addClass()$.css() vs vs vs $.removeClass().addClass() js lisos - http://jsperf.com/jquery-css-vs-addclass-speed/2

Fuente

2014-01-15 23:09:43

Su jsperf ciertamente muestra cómo lo más importante que debe hacer si quiere rendimiento es omitir la parte de jQuery y codificarla directamente en el DOM. ¡Felicitaciones por responder una pregunta de rendimiento con mediciones reales! No puedo creer que la respuesta aceptada a esta pregunta hiciera CERO medición real. Es una pena en mi libro. Simplemente no puede responder de manera confiable una pregunta de rendimiento sin medición. – jfriend00

jQuery performance, .css o addClass

Respuesta

Cuestiones relacionadas