Share
Como hablantes de inglés, nuestras mentes están orientadas a la interpretación de datos y texto de izquierda a derecha. Sin embargo, como resultado, muchos de los motores de selección de JavaScript modernos (jQuery, YUI 3, NWMatcher) y el nativo querySelectorAll, analizar cadenas de selector de derecha a izquierda.
Es importante tener en cuenta que, la mayoría de las veces, no necesita preocuparse demasiado por el rendimiento del selector, siempre que sus selectores no sean detestables. El Sizzle de jQuery es increíblemente rápido y complaciente..
Considere el siguiente selector:
Accentsconagua
$ ('. caja p'); Aunque algunos motores de selección, generalmente más antiguos, primero consultarán el elemento DOM con un clase de caja, y luego pasar a encontrar cualquier pag Etiquetas que son niños, jQuery funciona a la inversa. Comienza por consultar el DOM para todos las etiquetas de párrafo en la página, y luego trabaja de manera ascendente hasta los nodos principales y busca .caja.
Podemos usar el excelente sitio web de JsPerf.com para probar esto.
// el marcado// La prueba // 1. $ ('# box p'); // 2. $ ('# box'). Find ('p');Hola
La imagen de arriba muestra que usando encontrar() o niños() es aproximadamente un 20-30% más rápido, dependiendo del navegador.
La biblioteca jQuery tiene una optimización que determinará inmediatamente si un carné de identidad fue pasado al objeto jQuery ( $ ('# box') ). Si ese es el caso, no necesita usar Sizzle; en cambio, pasa rápidamente el selector a getElementById. Y, por supuesto, si el navegador es lo suficientemente moderno., querySelectorAll se hará cargo de Sizzle.
Por otro lado, con $ ('# box p'), jQuery necesita analizar esta cadena con la API de Sizzle, que tardará un poco más (aunque Sizzle tiene una optimización para los selectores que comienzan con un carné de identidad). Esto es precisamente por eso que también es ligeramente más rápido hacer cosas como $ ('. elems'). primero () terminado $ ('. elems: primero'). El último selector tendrá que ser analizado.
Repasemos otro ejemplo:
$ ('# container>: disabled'); Este selector parece apropiado. Encuentra todas las entradas deshabilitadas (o en realidad, los elementos) que están dentro #envase. Sin embargo, como hemos aprendido, jQuery y el nativo. querySelectorAll trabajar de derecha a izquierda. Esto significa que jQuery tomará, literalmente, todos los elementos del DOM, y determinará si su discapacitado el atributo se establece en verdadero. Observe que no hay un filtro previo para buscar primero todas las entradas en la página. En su lugar, cada elemento en el DOM será consultado.
// Desde jQuery Source disabled: function (elem) return elem.disabled === true;
Una vez que se compila una colección, luego viaja por la cadena al padre y determina si es #envase. Ciertamente, esto no es efectivo y, aunque es cierto que tal vez se presta demasiada atención a la comunidad para seleccionar el desempeño, todavía debemos esforzarnos para no escribir selectores demasiado intensivos, cuando sea posible.
Puedes mejorar un poco este selector haciendo:
// Mejor $ ('# container> input: disabled'); Este código limitará la consulta a todas las entradas de la página primero (en lugar de cada elemento). Aún mejor, sin embargo, podemos usar de nuevo el encontrar o niños método.
$ ('# container'). children ('input: disabled'); Es importante para mí reiterar que, honestamente, no tiene que preocuparse demasiado por el rendimiento del selector. Hay muchas optimizaciones en jQuery que te ayudarán. En general, es mejor enfocarse en artículos de mayor tamaño, como la organización y estructura de códigos.
Como ejemplo, si Sizzle se encuentra con un selector como $ ('# box p'), es cierto que funciona de derecha a izquierda, pero también hay una optimización rápida de expresiones regulares que primero determinará si la primera sección del selector es una carné de identidad. Si es así, lo usará como contexto, cuando busque las etiquetas de párrafo.
No obstante, siempre es útil saber qué sucede detrás de escena, al menos en un nivel muy bajo..
