¿Buenas formas de mejorar el rendimiento del selector jQuery?

Question

Estoy buscando alguna forma de mejorar el rendimiento del selector de una llamada jQuery.Específicamente cosas como esta:

Es $("div.myclass") más rápido que $(".myclass")

Creo que podría serlo, pero no sé si jQuery es lo suficientemente inteligente como para limitar primero la búsqueda por nombre de etiqueta, etc.¿Alguien tiene alguna idea sobre cómo formular una cadena selectora de jQuery para obtener el mejor rendimiento?

Answer 1

No hay duda filtrar primero por nombre de etiqueta es mucho más rápido que filtrar por nombre de clase.

Este será el caso hasta que todos los navegadores implementen getElementsByClassName de forma nativa, como es el caso de getElementsByTagName.

Answer 2

En algunos casos, puede acelerar una consulta limitando su contexto.Si tiene una referencia de elemento, puede pasarla como segundo argumento para limitar el alcance de la consulta:

$(".myclass", a_DOM_element);

debería ser más rápido que

$(".myclass");

si ya tiene un_DOM_element y es significativamente más pequeño que todo el documento.

Answer 3

Como dijo Reid anteriormente, jQuery funciona de abajo hacia arriba.A pesar de

eso significa $('#foo bar div') es mucho más lento que $('bar div #foo')

Ese no es el punto.Si tuvieras #foo De todos modos, no colocaría nada antes en el selector, ya que las identificaciones deben ser únicas.

La cuestión es:

• Si está subseleccionando algo de un elemento con una ID, seleccione primero el último y luego use .find, .children etc.: $('#foo').find('div')
• su parte más a la izquierda (primera) del selector poder ser menos eficiente escalar a la parte más a la derecha (última) que debería ser el más eficiente, es decir, si no tiene una identificación, asegúrese de buscar $('div.common[slow*=Search] input.rare') en vez de $('div.rare input.common[name*=slowSearch]') - dado que esto no siempre es aplicable, asegúrese de forzar el orden del selector dividiéndolo en consecuencia.

Answer 4

Para comprender completamente qué es más rápido, debe comprender cómo funciona el analizador CSS.

El selector que pasa se divide en partes reconocibles usando RegExp y luego se procesa pieza por pieza.

Algunos selectores, como ID y TagName, utilizan la implementación nativa del navegador, que es más rápida.Mientras que otros, como la clase y los atributos, se programan por separado y, por lo tanto, son mucho más lentos, lo que requiere recorrer los elementos seleccionados y verificar todos y cada uno de los nombres de las clases.

Entonces sí para responder a tu pregunta:

$('tag.class') es más rápido que solo $('.class').¿Por qué?En el primer caso, jQuery utiliza la implementación nativa del navegador para filtrar la selección solo a los elementos que necesita.Solo entonces inicia la implementación .class más lenta, filtrando hasta lo que usted solicitó.

En el segundo caso, jQuery usa su método para filtrar todos y cada uno de los elementos tomando clases.

Esto se extiende más allá de jQuery ya que todas las bibliotecas de JavaScript se basan en esto.La única otra opción es usar xPath, pero actualmente no es muy compatible con todos los navegadores.

Answer 5

A continuación se explica cómo aumentar el rendimiento de sus selectores jQuery:

• Seleccione por #id siempre que sea posible (resultados de la prueba de rendimiento ~250 más rápido)
• Especifique el alcance de sus selecciones ($('.select', this))

Answer 6

Agregaré una nota de que en el 99% de las aplicaciones web, incluso las aplicaciones pesadas con ajax, la velocidad de conexión y la respuesta del servidor web impulsarán el rendimiento de su aplicación en lugar de JavaScript.No estoy diciendo que debas escribir código intencionalmente lento o que, en general, ser consciente de qué cosas probablemente sean más rápidas que otras no sea bueno.

Pero me pregunto si estás intentando resolver un problema que todavía no existe, o incluso si estás optimizando algo que podría cambiar en un futuro próximo (por ejemplo, si más personas empiezan a utilizar un navegador que admita getElementsByClassName() función mencionada anteriormente), haciendo que su código optimizado en realidad se ejecute más lento.

Answer 7

Otro lugar para buscar información sobre el rendimiento es la página Análisis de rendimiento de los selectores de Hugo Vidal Teixeira.

http://www.componenthouse.com/article-19

Esto proporciona una buena reducción de velocidades para el selector por identificación, el selector por clase y el nombre de la etiqueta del prefijo del selector.

Los selectores más rápidos por id fueron:$("#id")

El seleccionador más rápido por clase fue:$('etiqueta.clase')

¡Así que poner el prefijo por etiqueta solo ayudó al seleccionar por clase!

Answer 8

He estado en algunas de las listas de correo de jQuery y, por lo que he leído allí, lo más probable es que filtren por nombre de etiqueta y luego por nombre de clase (o viceversa si fuera más rápido).Están obsesionados con la velocidad y usarían cualquier cosa para ganar un poco de rendimiento.

Realmente no me preocuparía demasiado por eso de todos modos a menos que esté ejecutando ese selector miles de veces por segundo.

Si está realmente preocupado, intente realizar algunas evaluaciones comparativas y vea cuál es más rápido.

Answer 9

Considere usar la biblioteca Sequentially de Oliver Steele para llamar a métodos a lo largo del tiempo en lugar de hacerlo todos a la vez.

http://osteele.com/sources/javascript/sequentially/

El método "eventualmente" le ayuda a llamar a un método después de un cierto período de tiempo desde su llamada inicial.El método "secuencial" le permite poner en cola varias tareas durante un período de tiempo.

¡Muy útil!

Answer 10

A gran consejo de una pregunta que hice:Usar selectores CSS estándar donde sea posible.Esto permite a jQuery utilizar el API de selectores.De acuerdo a pruebas realizadas por John Resig, esto da como resultado un rendimiento casi nativo para los selectores.Funciones como :has() y :contains() debería ser evitado.

Según mi investigación, el soporte para la API de Selectores se introdujo con jQuery 1.2.7, Firefox 3.1, IE 8, Opera 10, Safari 3.1.

Answer 11

Si no me equivoco, jQuery también es un motor ascendente.Eso significa $('#foo bar div') es mucho más lento que $('bar div #foo').Por ejemplo, $('#foo a') pasará por todos los a elementos en la página y ver si tienen un antepasado de #foo, lo que hace que este selector sea inmensamente ineficiente.

Es posible que Resig ya haya optimizado para este escenario (no me sorprendería si lo hiciera; creo que lo hizo en su motor Sizzle, pero no estoy 100% seguro).

Answer 12

Creo que seleccionar primero por ID siempre es más rápido:

$("#myform th").css("color","red");

debería ser más rápido que

$("th").css("color","red");

Sin embargo, me pregunto cuánto ayuda el encadenamiento al comenzar con la identificación.Es esto

$("#myform").find("th").css("color","red")
.end().find("td").css("color","blue");

¿Algo más rápido que esto?

$("#myform th").css("color","red");
$("#myform td").css("color","blue");