Question

我在使用多个jQuery绑定数千个元素和输入时遇到加载速度问题，有没有更有效的方法呢？

该网站能够通过ajax调用在产品列表之间切换，页面无法刷新。有些列表有10个项目，大约100个，有些超过2000个。当我开始在列表之间翻转时出现速度问题;每次加载2000+项目列表时，系统拖动大约10秒钟。

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

循环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
    );
});

Answer 1

您正在绑定处理程序2500次，而是使您的函数使用live或delegate，如下所示：

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

.live()侦听点击在DOM级别冒泡，然后使用点击源的上下文执行事件。这意味着您拥有一个事件处理程序而不是其中的2500个，这意味着它在浏览器上更快更容易更多。

如果你有一个容器来包装未被替换的替换内容（保留在所有AJAX调用中），你可以使它更加本地化：

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

结果是事件在被捕获之前泡泡的次数减少了。

另一个痛点可能是元素的创建，你可以发布那些代码吗？通常很容易进行优化，从而在那里产生巨大的性能提升。

<强>更新

从jQuery 1.7开始，不推荐使用.live()方法。使用.on()附加事件处理程序。旧版jQuery的用户应优先使用.delegate()而不是.live() - JQuery Docs

Answer 2

将您的点击事件绑定到整个文档，在该函数中，查看event.target以查看实际点击了哪个产品元素。这样你只需要进行一次绑定。

Answer 3

你应该查看jqrid或flexigrid这样的内容，这样你就可以一次性分配数据，这样就可以限制你一次输出的数量，即使这些东西也是如此适合您的项目，你必须弄清楚如何限制数据是底线

Answer 4

首先，使用Firebug中内置的探查器来检查大部分延迟的位置;只需点击“个人资料”，运行你的慢动作，再次点击它，看看哪个电话最贵。

其次，查看“实时”事件处理：http://api.jquery.com/live/

这种方式的工作方式是只有一个事件处理程序，查看整个文档，委托给实时事件处理程序。当你有大量元素时，这会更快地运行，因为你不需要专门为每个元素添加一个事件处理程序。

jQuery绑定效率

4 个答案: