jQuery vincular la eficiencia

bind

Question

Tengo problemas con la velocidad de carga al usar varios enlaces jQuery en un par de miles de elementos y entradas, ¿hay alguna forma más eficiente de hacerlo?

El sitio tiene la capacidad de cambiar entre las listas de productos a través de llamadas ajax, la página no se puede actualizar. Algunas listas tienen 10 elementos, unos 100, algunos más de 2000. El problema de la velocidad surge cuando comienzo a pasar de una lista a otra; cada vez que se carga la lista de elementos del 2000+, el sistema se arrastra durante unos 10 segundos.

Antes de reconstruir la lista, estoy configurando el html del elemento de destino en '''', y desenlazando los dos enlaces a continuación. Estoy seguro de que tiene algo que ver con todas las llamadas de padres, y las llamadas de niños que estoy haciendo en las devoluciones de llamada. Cualquier ayuda es muy apreciada.

bucle 2500 veces

<ul>
  <li><input type="text" class="product-code" /></li>
  <li>PROD-CODE</li>
  ...
  <li>PRICE</li>
</ul>

bucle final

$(''li.product-code'').bind( ''click'', function(event){ 

    selector = ''#p-''+ $(this).prev(''li'').children(''input'').attr(''lm'');

        $(selector).val(

            ( $(selector).val() == '''' ? 1 : ( parseFloat( $(selector).val() ) + 1 ) )

        );

    Remote.Cart.lastProduct = selector;
    Remote.Cart.Products.Push( 

            Remote.Cart.customerKey, 
            { 
                code      : $(this).prev(''li'').children(''input'').attr(''code''),
                title     : $(this).next(''li'').html(), 
                quantity  : $(''#p-''+ $(this).prev(''li'').children(''input'').attr(''lm'') ).val(), 
                price     : $(this).prev(''li'').children(''input'').attr(''price''),
                weight    : $(this).prev(''li'').children(''input'').attr(''weight''),
                taxable   : $(this).prev(''li'').children(''input'').attr(''taxable''),
                productId : $(this).prev(''li'').children(''input'').attr(''productId''),
                links     : $(this).prev(''li'').children(''input'').attr(''productLinks'')
            },
            ''#p-''+ $(this).prev(''li'').children(''input'').attr(''lm''),
            false,
            ( parseFloat($(selector).val()) - 1 )

    );

    return false;

});

$(''input.product-qty'').bind( ''keyup'', function(){ 

    Remote.Cart.lastProduct = ''#p-''+ $(this).attr(''lm'');
    Remote.Cart.Products.Push( 

            Remote.Cart.customerKey, 
            { 
                code      : $(this).attr(''code'') , 
                title     : $(this).parent().next(''li'').next(''li'').html(), 
                quantity  : $(this).val(), 
                price     : $(this).attr(''price''),
                weight    : $(this).attr(''weight''),
                taxable   : $(this).attr(''taxable''),
                productId : $(this).attr(''productId''),
                links     : $(this).attr(''productLinks'')
            },
            ''#p-''+ $(this).attr(''lm''),
            false,
            previousValue
    );
});

Answer 1

Debería mirar algo de jqrid o flexigrid que le permita realizar la paginación que es la cantidad de datos que se van a generar a la vez, por lo que es mejor limitar la cantidad que saca a la vez, incluso si esas cosas son adecuadas para su proyecto, debe averiguar cómo. limitar los datos es la línea de fondo

Answer 2

Primero, use el generador de perfiles integrado en Firebug para verificar dónde está la mayor parte del retraso; solo presione "perfil", ejecute su acción lenta, presione nuevamente y vea cuáles son las llamadas más caras.

En segundo lugar, consulte la gestión de eventos "en vivo": .live()

La forma en que funciona es que solo hay un controlador de eventos, que examina todo el documento, delegando a los controladores de eventos en vivo. Esto funciona mucho más rápido cuando tiene muchos elementos, porque no necesita agregar un controlador de eventos a cada elemento específicamente.

Answer 3

Usted está vinculando un manejador 2500 veces, en lugar de eso, haga que su función use en vivo o delegue así:

$(''li.product-code'').live(''click'', function(event){ 
$(''input.product-qty'').live(''keyup'', function(){ 

.live() escucha el clic para aumentar en el nivel DOM y luego ejecuta el evento con el contexto de la fuente del clic. Esto significa que tienes un controlador de eventos en lugar de 2500 de ellos, lo que significa que es mucho más rápido y fácil en el navegador.

Si tiene un contenedor que envuelve el contenido reemplazado que no se reemplaza (permanece en todas las llamadas AJAX), puede hacerlo más local como este:

$(''#container'').delegate(''li.product-code'', ''click'', function(event){ 
$(''#container'').delegate(''input.product-qty'', ''keyup'', function(){ 

El resultado de esto es que el evento burbujea menos veces antes de ser atrapado.

Otro punto problemático es probablemente la creación de los elementos, ¿puedes publicar ese código? A menudo hay optimizaciones fáciles que producen un gran aumento de rendimiento allí.

Actualizar

A partir de jQuery 1.7, el método .live() está en desuso. Utilice .on() para adjuntar controladores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate() en lugar de .live() - JQuery Docs

Answer 4

Vincule su evento de clic a todo el documento y, dentro de la función, observe event.target para ver en qué elemento del producto realmente se hizo clic. De esta manera solo necesitas hacer un enlace único.