Производительность jQuery: $('# selector'). live() против ручного привязки (при работе с ajax-запросами)

При работе с содержимым, загруженным асинхронно, есть какая-либо разница с точки зрения производительности между:

// .live()
$('#mybutton').live('click', function(e){ doSomething(); });

и вручную привязать() события, которые нам нужны каждый раз после загрузки содержимого:

// manual bind every time
$.ajax({
    url: url,
    success: function(data){
        mycontainer.html(data); // data contains #mybutton
        $('#mybutton').click(function(e){ doSomething(); });  
    }
});

Ответ 1

Существуют разные затраты, давайте посмотрим на них:

$('#mybutton').live('click', function(e){ doSomething(); });

Здесь есть две основные затраты:

Селектор #mybutton должен запускаться немедленно без причины (результат отбрасывается, мы просто хотели, чтобы селектор все равно... мы привязываемся к document). В этом случае это #id селектор, так что очень низкая стоимость... в других случаях это не дешево и очень расточительно (например [attr=something]).
Каждый click, который пузырится до document, теперь должен быть проверен на этот селектор, стоимость оценки за клик, это зависит от количества ожидаемых кликов.

Теперь посмотрим на другой метод:

$('#mybutton').click(function(e){ doSomething(); });

Здесь также есть две основные затраты:

Селектор #mybutton запускается, но только один раз для каждого запроса ajax. Однако мы не теряем его, мы используем результаты.
Обработчик click привязан к фактическому элементу, а не к document, поэтому стоимость привязки каждый раз, когда он выполняется, а не один раз

Однако нет никакой цены за клик, и сам вызов селектора не пропадает зря... так что лучше в целом, так как вы используете идентификатор, это неверно в других случаях.

В вашем случае, поскольку вы имеете дело с идентификатором (и гарантируете один элемент), это намного дешевле:

$('#mybutton').click(function(e){ doSomething(); });

В других случаях, когда вы связываете сотни элементов, .live() является явным победителем, хотя .delegate() будет еще лучше.

Ответ 2

Наверное, немного, но я бы не стал беспокоиться об этом. Для меня метод .live() выглядит намного проще в обслуживании, поэтому я бы использовал его. Пока ничего не мучительно медленно, не нужно беспокоиться о производительности в JavaScript.

Ответ 3

С точки зрения вашей функции успеха вы присоединяете событие, потому что этот элемент теперь доступен в вашем html? Это так?

Если это так, то если функция, вызванная с помощью клика, всегда одна и та же, вы можете использовать 'live'. Live позволяет привязываться к событиям, которые еще не существуют. Таким образом, вы можете добавить это еще до вашего документа. Затем, когда ajax обновляет ваш основной документ, это событие должно всегда работать. Вам не нужно будет назначать его каждый раз.

Таким образом, вы получаете преимущество в производительности от того, что вам не нужно что-то делать каждый раз, когда вы возвращаетесь с помощью ajax-вызова, вы выполняете настройку, не полагаясь на document.ready и гарантируя ее работу.

НТН.