el mejor funcionamiento para jQuery Selector

Este obtiene y almacena el color de fondo de un enlace específico:el mejor funcionamiento para jQuery Selector

var origColor = $("ul.relatedAlbums li a").css("background-color");

Pero hay una gran cantidad de esos vínculos, y me da la sensación de que esto es ineficiente. Me imagino que hay una manera de decirle a la consulta del selector que se detenga después de la primera coincidencia, y así ahorrar en el tiempo de procesamiento. He aquí cómo me imagino haciendo eso:

var origColor = $("ul.relatedAlbums li a:first").css("background-color");

¿Es esta la manera correcta/eficiente de hacerlo? La gente dice que usar css pseudo classes es lento, pero no estoy seguro de si eso aplica. Esto solo tiene la misma sintaxis, ¿verdad?

Fuente

2010-06-24 Matrym

Esos no son ejemplos equivalentes. En el primero, cambia el fondo de todos los enlaces, y en el segundo, solo del primer enlace. ¿Que estás tratando de hacer? El rendimiento es secundario, primero obtenga el comportamiento correcto. Veo, déjame añadir una respuesta – Anurag

@Anurag - En ninguno de los dos ejemplos está ** configurando ** algo, está intentando ** obtener ** el 'color de fondo' – gnarf

@gnarf - Leo la pregunta demasiado rápido y me pierdo en este importante detalle. Pertenezco a la facción que corta tres veces, luego mide una vez: D – Anurag

No necesita :first porque el método css solo examina el atributo del primer elemento en el conjunto de elementos coincidentes.

http://api.jquery.com/css/
css (propertyName)

Obtener el valor de una propiedad de estilo para el primer elemento en el conjunto de elementos coincidentes.

Fuente

2010-06-24 21:03:54 RamboNo5

, de hecho, se ha demostrado que: primero puede ser más lento que no usarlo en absoluto: http://api.jquery.com/first-selector/ –

@Scott Evernden - No es sorprendente, teniendo en cuenta que la versión get de la función '.css()' usa 'elem [0]' donde el selector ': first' usa un' filtro' con una función de devolución de llamada 'function (elem, i) {return i === 0; } 'que se aplicará a cada elemento. – gnarf

motor selector de jQuery maneja el selector :first por primera búsqueda de ul.relatedAlbums li a luego aplicar un filtro contra todos los elementos coincidentes. Aunque este filtro es bastante corto:

first: function(elem, i){ 
    return i === 0; 
}

Aún genera una llamada de función para CADA elemento en el selector.

El método .css(prop) devolverá jQuery.curCSS(elems[0], prop). Por lo tanto, el selector :first es puramente un rendimiento desperdiciado.

Fuente

2010-06-24 21:07:10 gnarf

lo que dijo RamboNo5, pero si desea editar el color de fondo sólo para el primer elemento que se puede utilizar

var origColor = $("ul.relatedAlbums li a:first").css("background-color", "red");

como usted ha dicho, pero creo que también se puede utilizar

var origiColor = $("ul.relatedAlbums li").first().css("background-color", "red");

No lo he probado, pero creo que debería funcionar y creo que es más rápido, ya que no requiere el análisis del selector.

echar un vistazo a: - api.jquery.com/first-selector/ - http://api.jquery.com/first/ para más información

Fuente

2010-06-24 21:08:28 user375700

No creo que la: primer selector le comprará mucho.

Una de las mejores formas de mejorar el rendimiento con un selector es utilizar el parámetro de contexto opcional con un selector de id.

Algo como esto ...

var origColor = $("ul.relatedAlbums li a", "#surroundingDiv").css("background-color");

Eso selector de contexto segunda realidad le dice al motor de jQuery para buscar primero el DOM para #surroundingDiv. Y luego esos resultados se reducen aún más con el primer selector.

Desde selectores ID son, con mucho, el más rápido de todos los selectores, esta técnica puede a veces el doble de rendimiento en función del tamaño relativo del contexto en comparación con el resto de la DOM.

Fuente

2010-06-24 21:15:28

Por extraño que pueda parecer, estoy obteniendo "a: first" consistentemente más rápido en Safari, y Firefox, y más lento en Chrome y Opera en these tests. Sin embargo, estos resultados son para casi 12,000 enlaces en la página, por lo que un milisegundo aquí o allá no vale la pena tirar pelos.

Safari

alt text http://tinyurl.com/27polne

Firefox

alt text http://tinyurl.com/2ay56yr

Chrome

alt text http://tinyurl.com/248nurm

Opera

alt text http://tinyurl.com/254unwc

Para optimizar esta realidad, nunca se debe seleccionar todos los enlaces. Asigne una ID única al primer enlace y acceda solo a eso. Aquí está un new test con la búsqueda de un solo elemento, y sopla las otras técnicas fuera de proporción. Huelga decir que esto obviamente iba a ser muy rápido, pero esto es solo una comparación de cuánto más rápido.

OK, no puedo evitar añadir jQuery style performance numbers de sus 1.0 días :)

Safari (112.000% más rápido)

alt text http://tinyurl.com/2b2w2fc

Firefox (30.000% más rápido)

alt text http://tinyurl.com/25xjzs4

Chrome (24.000% más rápido)

alt text http://tinyurl.com/28w9fgq

Opera (38.000% más rápido)

alt text http://tinyurl.com/27lsz2u

Configuración: