jQuery绑定效率 [英] jQuery bind efficiency

问题描述

我在成千上万的元素和输入上使用多个jQuery绑定的加载速度遇到问题，是否有更有效的方法来做到这一点?

I'm having issue with load speed using multiple jQuery binds on a couple thousands elements and inputs, is there a more efficient way of doing this?

该站点具有通过ajax调用在产品列表之间切换的功能，该页面无法刷新.有些列表有10个项目，有些大约100个，有些超过2000个.当我开始在两个列表之间切换时，就会出现速度问题.每次加载2000多个项目列表时，系统都会拖移大约10秒钟.

The site has the ability to switch between product lists via ajax calls, the page cannot refresh. Some lists have 10 items, some 100, some over 2000. The issue of speed arises when I start flipping between the lists; each time the 2000+ item list is loaded the system drags for about 10 seconds.

在重建列表之前，我将目标元素的html设置为''，并取消绑定下面的两个绑定.我确定它与我在回调中执行的所有父调用，下调用和子调用有关.非常感谢您的帮助.

Before I rebuild the list I am setting the target element's html to '', and unbinding the two bindings below. I'm sure it has something to do with all the parent, next, and child calls I am doing in the callbacks. Any help is much appreciated.

循环2500次

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

结束循环

$('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
    );
});

推荐答案

您将处理程序绑定2500次，而是使函数使用实时或委托方式，如下所示:

You are binding a handler 2500 times, instead make your function use either live or delegate like this:

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

.live() 侦听在DOM级别冒起的点击，然后执行事件点击源的上下文.这意味着您有一个一个事件处理程序，而不是其中的2500个，这意味着它在浏览器中的运行速度更快，更轻松.

.live() listens for the click to bubble up at the DOM level then executes the event with the context of the click source. This means you have one event handler instead of 2500 of them, meaning it's much faster and easier on the browser.

如果您有一个容器包装未替换的已替换内容(在所有AJAX调用中仍然存在)，则可以使它更本地化:

If you have a container that wraps the replaced content that isn't replaced (remains across all AJAX calls), you can make it more local like this:

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

其结果是事件在被捕获之前冒泡的次数更少.

The result of this is the event bubbles fewer times before being caught.

另一个痛苦点可能是元素的创建，您可以发布该代码吗?经常有一些简单的优化可以大大提高性能.

Another pain point is probably the creation of the elements, can you post that code? There are often easy optimizations that yield a big performance boost there.

更新

从jQuery 1.7开始，不推荐使用 .live()方法.使用 .on()附加事件处理程序.较旧版本的jQuery的用户应优先使用 .delegate() ://api.jquery.com/live/"rel =" nofollow noreferrer>.live()- jQuery文档

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live() - JQuery Docs

这篇关于jQuery绑定效率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！