Pregunta Buenas formas de mejorar el rendimiento del selector jQuery?


Estoy buscando la 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 ser, pero no sé si jQuery es lo suficientemente inteligente como para limitar la búsqueda por nombre de etiqueta primero, etc. ¿Alguien tiene alguna idea sobre cómo formular una cadena de selector jQuery para obtener el mejor rendimiento?


74
2017-09-05 16:22


origen


Respuestas:


No hay duda de que filtrar por nombre de etiqueta primero 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.


36
2017-09-05 16:39



En algunos casos, puede acelerar una consulta al limitar su contexto. Si tiene una referencia de elemento, puede pasarla como el 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 elemento_DOM y es significativamente más pequeño que el documento completo.


14
2017-12-20 01:16



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

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

Ese no es el punto. Si tuvieras #foo de todos modos, no pondría nada en el selector, ya que los ID deben ser únicos.

La cuestión es:

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

5
2017-11-06 15:11



Para comprender completamente qué es más rápido, debes entender cómo funciona el analizador de 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, usan 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 pasar por los elementos seleccionados y verificar todos y cada uno de los nombres de las clases.

Entonces sí para responder su pregunta:

$ ('tag.class') es más rápido que solo $ ('. clase'). ¿Por qué? Con el primer caso, jQuery usa la implementación del navegador nativo para filtrar la selección a solo los elementos que necesita. Solo entonces lanza la implementación de clase más lenta filtrándose a lo que usted solicitó.

En el segundo caso, jQuery usa su método para filtrar cada elemento al tomar la clase.

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.


5
2018-01-06 11:13



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


4
2017-10-20 15:37



Añadiré una nota que dice que en el 99% de las aplicaciones web, incluso en las aplicaciones pesadas de ajax, la velocidad de conexión y la respuesta del servidor web impulsarán el rendimiento de su aplicación en lugar del javascript. No digo que deba escribir código intencionalmente lento o que, por lo general, estar al tanto de lo que las cosas probablemente sean más rápidas que otras no sea bueno.

Pero me pregunto si estás tratando de resolver un problema que en realidad aún no existe, o incluso si estás optimizando para algo que podría cambio en el futuro cercano (por ejemplo, si más personas comienzan a usar un navegador que admite getElementsByClassName() función mencionada anteriormente), haciendo que su código optimizado realmente se ejecute más lento.


3
2017-12-20 00:45



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

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

Esto proporciona una buena disminución de las velocidades para el selector por id, selector por clase y nombre de etiqueta de prefijación del selector.

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

El selector más rápido por clase fue: $ ('tag.class')

¡Así que prefijar por etiqueta solo ayudó cuando se seleccionó por clase!


3
2017-09-05 16:32