jQuery связывает эффективность

У меня есть проблема со скоростью под нагрузкой с помощью нескольких, 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
    );
});
16
задан clownshoes 19 March 2010 в 18:51
поделиться

4 ответа

Вы привязываете обработчик 2500 раз, вместо этого заставляете свою функцию использовать live или делегировать, например:

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

28
ответ дан 30 November 2019 в 17:52
поделиться

Во-первых, используйте профилировщик, встроенный в Firebug, чтобы проверить, где большая часть задержки; просто нажмите «профиль», запустите медленное действие, нажмите еще раз и посмотрите, какие звонки самые дорогие.

Во-вторых, посмотрите на «живую» обработку событий: http://api.jquery.com/live/

Это работает так: есть только один обработчик событий, просматривающий весь документ и делегирующий обработчикам событий live. Это работает намного быстрее, когда у вас много элементов, потому что вам не нужно добавлять обработчик событий специально для каждого элемента.

0
ответ дан 30 November 2019 в 17:52
поделиться

вы должны посмотреть на jqrid или flexigrid что-то, что позволит вам сделать пейджинг, что много данных для вывода сразу, так что лучше ограничить, сколько вы выводите сразу, даже если эти вещи подходят для вашего проекта, вы должны выяснить, как ограничить данные, это нижняя линия

0
ответ дан 30 November 2019 в 17:52
поделиться

Привяжите событие click ко всему документу, а внутри функции посмотрите на event.target, чтобы узнать, на какой элемент продукта был нажат. Таким образом, вам нужно будет выполнить только одну привязку.

2
ответ дан 30 November 2019 в 17:52
поделиться
Другие вопросы по тегам:

Похожие вопросы: