jQuery bind verimi

Question

Binlerce öğe ve girişte birden fazla jQuery bağlaması kullanarak yükleme hızıyla ilgili sorun yaşıyorum, bunu yapmanın daha verimli bir yolu var mı?

Site ajax aramaları ile ürün listeleri arasında geçiş yapma olanağına sahiptir, sayfa yenilenemiyor. Bazı listelerde, bazıları 100, bazıları 2000'den fazla olmak üzere 10 öğe vardır. Listeler arasında dolaşmaya başladığımda hız sorunu ortaya çıkar; 2000+ öğe listesi her yüklendiğinde, sistem yaklaşık 10 saniye sürüyor.

Listeyi yeniden oluşturmadan önce, hedef öğenin html'sini '' olarak ayarlıyorum ve aşağıdaki iki bağlamayı açamıyorum. Eminim ki, tüm ebeveynle, bir daha sonra ve geri aramalarda yaptığım çocuk çağrılarıyla bir ilgisi var. Herhangi bir yardım çok takdir edilmektedir.

döngü 2500 defa

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

uç döngü

$('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

Bir Handler 2500 kez bağlayıcı yerine ya yayınlama işlevi yararlanabilir veya böyle temsilci: DOM düzeyinde kabarcık kadar tıklama için

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

.live() dinler sonra bağlam olayı yürütür tıklama kaynağının Bu, 2500 tanesi yerine bir olay işleyicinizin olduğu anlamına gelir, yani çok tarayıcıda daha hızlı ve daha kolay.

değiştirdiğiniz (tüm AJAX çağrıları arasında kalır) değil değiştirilen içeriği sarar bir kap varsa, bu gibi daha yerel yapabilirsiniz:

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

Bunun sonucu olaydır yakalanmadan önce daha az kez kabarcıklar.

Başka bir ağrı noktası muhtemelen elementlerin oluşturulmasıdır, bu kodu gönderir misiniz? Orada büyük bir performans artışı sağlayan genellikle kolay optimizasyonlar vardır.

Güncelleştirme jQuery 1.7 itibarıyla

, .live() yöntem kaldırıldı. Olay işleyicileri eklemek için .on() kullanın. jQuery eski sürümlerini kullananlar .live() tercih edilerek .delegate() kullanmalıdır - JQuery Docs

Answer 2

bunu Dolayısıyla en iyisi aynı anda çıkışa veri tahsis çağrı Thats yapmanızı sağlayacaktır jqrid veya flexigrid somthing bakmak gerekir Bu şeyleri projeniz için doğru olsa bile, bir seferde ne kadar tükettiğinizi sınırlayın, verilerin nasıl sınırlandırılacağını anlamanız gerekir.

Answer 3

Tıklama etkinliğinizi tüm belgeye bağlayın ve işlev içinde hangi ürün öğesinin gerçekten tıklandığını görmek için event.target dosyasına bakın. Bu sayede sadece tek bir bağlantı yapmanız gerekir.

Answer 4

İlk olarak, gecikmenin çoğunun nerede olduğunu kontrol etmek için Firebug'a yerleşik profilleyiciyi kullanın; sadece "profile" basın, yavaş hareketinizi çalıştırın, tekrar vurun ve hangi aramaların en pahalı olduğunu görün.

İkincisi, "canlı" olay işleme bakmak: Bu işleri http://api.jquery.com/live/

yönlü olay işleyicileri yaşamak devrederek, tüm belge bakarak, sadece bir olay işleyicisi var olmasıdır. Bu, birçok öğeye sahip olduğunuzda çok daha hızlı çalışır, çünkü her öğeye özel bir olay işleyicisi eklemeniz gerekmez.