Cómo utilizar jQuery de manera eficiente
2. Utilice el selector correcto
En jquery, puede utilizar varios selectores para seleccionar el mismo elemento de la página web. El rendimiento de cada selector varía y usted debe comprender sus diferencias de rendimiento.
Selectores más rápidos: selector de id y selector de etiquetas de elemento
Por ejemplo, la siguiente declaración tiene el mejor rendimiento: $('#id')
$( 'form')
$('input')
Al encontrar estos selectores, jQuery llamará automáticamente al método nativo del navegador (como getElementById()), por lo que la velocidad de ejecución es muy rápido.
Selector de bajo nivel: selector de clases
El rendimiento de $('.className') depende de diferentes navegadores. Los navegadores Firefox, Safari, Chrome y Opera tienen un método nativo getElementByClassName(), por lo que no es lento. Sin embargo, IE5-IE8 no implementa este método, por lo que el selector se ejecutará bastante lentamente en IE.
Los selectores más lentos: selectores de pseudoclases y selectores de atributos
Comencemos con un ejemplo. Para encontrar todos los elementos ocultos en una página web, utilice el selector de pseudoclase: $(':hidden') y el selector de atributos: $('[attribute=value]').
Estas dos declaraciones se ejecutan más lentamente porque el navegador no tiene métodos nativos para ellas. Sin embargo, las versiones más nuevas de algunos navegadores han agregado los métodos querySelector() y querySelectorAll(), mejorando así significativamente el rendimiento de este tipo de selectores.
En resumen, en términos de rendimiento, el selector de ID ocupa un distante segundo lugar, luego el selector de etiquetas y en tercer lugar el selector de clase, mientras que todos los demás selectores son muy lentos.
3. Comprender la relación entre elementos secundarios y elementos principales.
Los siguientes seis selectores seleccionan elementos secundarios de los elementos principales. ¿Sabes cuál es el más rápido y cuál es el más lento?
$('.child', $parent)
$parent.find('.child')
$parent.children('.child' )
$('#padre > .child')
$('#parent .child')
$('.child',$( '#parent'))
Veámoslo frase por frase.
$('.child',$parent): esta declaración significa que, dado un objeto DOM, se selecciona un elemento secundario del mismo. jQuery convertirá automáticamente esta declaración en $.parent.find('child'), lo que provocará alguna penalización en el rendimiento. Es entre un 5 y un 10% más lento que la forma más rápida.
$parent.find('.child'): Esta es la declaración más rápida. El método .find() llama a los métodos nativos del navegador (getElementById, getElementByName, getElementByTagName, etc.) y, por tanto, es más rápido.
$parent.children('.child'): esta declaración utiliza $.sibling() en jQuery y el método nextSibling() de javascript para atravesar los nodos uno por uno. Es un 50% más lento que la forma más rápida.
$('#parent > .child'): jQuery usa el motor Sizzle internamente para manejar varios selectores. El orden de selección del motor Sizzle es de derecha a izquierda, por lo que esta declaración primero selecciona .child y luego filtra el padre #parent uno por uno, lo que hace que sea aproximadamente un 70% más lento que la forma más rápida.
$('#parent .child'): La situación de esta declaración es la misma que la anterior.
Sin embargo, la declaración anterior solo selecciona hijos inmediatos, mientras que esta declaración se puede usar para seleccionar múltiples niveles de hijos, por lo que es más lenta, aproximadamente un 77% más lenta que la tabla más rápida.
$('.child',$('#parent')): jQuery convierte internamente esta declaración en $('#parent').find('.child'), que es el formulario más rápido son un 23% más lentos.
Entonces, la mejor opción es $parent.find('.child'). Y, dado que $parent generalmente se generó en una operación anterior, jQuery lo almacena en caché, lo que acelera aún más la ejecución.
4. No abuses de jquery
JQuery no es más rápido que los métodos nativos de JavaScript. Por lo tanto, trate de evitar el uso de jQuery cuando haya métodos nativos disponibles.
Vea el siguiente ejemplo de cómo vincular una función a un elemento a para manejar un evento de clic: $('a').click(function(){
alert($( this ).attr('id'));
});
Este código significa que al hacer clic en el elemento a aparecerá el atributo de identificación del elemento. Para obtener esta propiedad, debe llamar a jQuery dos veces seguidas, primero a $(this) y segundo a attr('id'). De hecho, dicho procesamiento es completamente innecesario. La forma más correcta de escribirlo es usar directamente el método javascript local y llamar a this.id: $('a').click(function(){
alert(this.id);
});
Según las pruebas, this.id es más de 20 veces más rápido que $(this) .attr('id').
5. Buen almacenamiento en caché
Seleccionar elementos específicos de la página web es un paso costoso. Por lo tanto, debe utilizar selectores lo menos posible y almacenar en caché los resultados de la selección tanto como sea posible para poder reutilizarlos en el futuro.
Por ejemplo, lo siguiente está mal escrito: jQuery('#top').find('p.classA');
jQuery('#top').find( 'p .classB');
Una mejor manera de escribirlo es: varcached = jQuery('#top');
cached.find('p.classA');
cached.find('p.classB');
Según las pruebas, el almacenamiento en caché es 2 o 3 veces más rápido que no hacerlo.
6. Utilice la escritura en cadena
Una característica importante de jQuery es que permite la escritura en cadena. $('div').find('h3').eq(2).html('Hello');
Al utilizar la escritura en cadena, jQuery almacenará automáticamente en caché los resultados de cada paso para que es más rápido que las escrituras desencadenadas. Según las pruebas, las escrituras encadenadas son aproximadamente un 25% más rápidas que las escrituras no encadenadas sin almacenamiento en caché.
7. Delegación de eventos
El modelo de eventos de Javascript utiliza el modo "burbuja", lo que significa que los eventos en los elementos secundarios se "burbujarán" en eventos en los elementos principales. Con este patrón, la vinculación de eventos se puede simplificar enormemente. Por ejemplo, si tiene una tabla con 100 celdas (elementos td) y desea vincular un evento de clic a cada celda, ¿necesita ejecutar el siguiente comando 100 veces? $("td").bind("clic", function(){
$(this).toggleClass("clic");
});
La respuesta es no, solo necesitamos vincular el evento en la parte superior del elemento de la tabla porque después de que ocurre un evento de clic en el elemento td, el evento "burbujeará" en el elemento de la tabla principal y será escuchado. Por lo tanto, solo necesita vincular el evento una vez en el elemento principal en lugar de 100 veces en el elemento secundario, lo que mejora enormemente el rendimiento.
Este es el llamado evento "delegado", donde el elemento secundario "delega" el evento al elemento principal.
Existen dos formas de escribir. La primera es utilizar el método .delegate(): $("table").delegate("td", "click", function(){
$(this).toggleClass("click" ) ;
});
El segundo es utilizar el método .live(): $("form").legate("td", "click", function( ){
$(this).toggleClass("click");
});
El segundo es utilizar el método .live(). each(function(){
$("td", this).live("click",function(){
$(this).toggleClass("click") ;
}) )
});
Estos dos métodos de escritura son básicamente equivalentes. La única diferencia es que .delegate() se activa cuando el evento sube al elemento principal especificado, mientras que .live() se activa cuando el evento sube al elemento raíz del documento, por lo que .delegate() es un poco más lento que . live() Sea más rápido. Además, estos dos métodos tienen la ventaja adicional de que también funcionan con elementos insertados dinámicamente en comparación con el método tradicional .bind(), que solo funciona con elementos DOM ya existentes, no se aplica a elementos insertados dinámicamente.
Según las pruebas, el procesamiento delegado es decenas de veces más rápido que el procesamiento delegado. Después de usar el procesamiento delegado, .delegate() es aproximadamente un 26% más rápido que .live().
8. Cambie menos la estructura DOM
Cambiar la estructura DOM generará una gran cantidad de gastos generales, así que no utilice métodos como .append(), .insertBefore() y . insertAfter() con frecuencia. Si desea insertar varios elementos, combínelos primero y luego insértelos todos a la vez. Según las pruebas, las inserciones fusionadas son casi 10 veces más rápidas que las inserciones no fusionadas.
Si va a procesar mucho un elemento DOM, primero debe usar el método .detach() para eliminar el elemento del DOM y luego volver a insertarlo en el documento después del procesamiento. Según las pruebas, usar el método .detach() es un 60% más rápido que no usar el método .detach().
Si desea almacenar datos en un elemento DOM, no escriba: var elem = $('#elem');
elem.data(key,value);
En su lugar, escribe esto: var elem = $('#elem');
$.data(elem,key,value);
Según En la prueba, este último es casi 10 veces más rápido que el primero. Debido a que el método elem.data () está definido en el objeto prototipo de la función jQuery y el método $.data () está definido en la función jQuery, no es necesario llamar a un objeto jQuery complejo al llamar, por lo que es mucho más rápido.
9. Manejar los bucles correctamente
Los bucles siempre son una operación que requiere mucho tiempo, así que no utilices bucles para identificar elementos uno por uno si puedes usar selectores complejos para seleccionar elementos directamente.
Los métodos de bucle nativos de Javascript (for y while) son más rápidos que el método .each() de jQuery, por lo que se deben utilizar primero los métodos nativos.
10. Genere la menor cantidad posible de objetos jQuery.
Cada vez que se utiliza un selector (como $('#id')), se generará un objeto jQuery. Por lo tanto, genere la menor cantidad posible de objetos jQuery.
Por ejemplo, muchos métodos jQuery tienen dos versiones, una para objetos jQuery y otra para funciones jQuery. Los dos ejemplos siguientes utilizan el método text() y ambos recuperan el texto del elemento. Puedes usar la versión del objeto jquery: var $text = $("#text");
var $ts = $text.text();
o usar la función jQuery Versión: var $text = $("#text");
var $ts = $.text($text);
También puedes usar la versión de la función jQuery .