jQuery skuteczności: $ („selektor #”) live() vs ręcznie wiążą (podczas pracy z Ajax żądań)

Question

Podczas pracy z treści ładowanych asynchronicznie jest jakaś różnica z punktu widzenia wydajności pomiędzy:.

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

i ręcznie powiązać() zdarzenia, musimy za każdym razem po załadowaniu treści:

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

?

Answer 1

Istnieją różne koszty, spójrzmy na nich:

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

Są 2 główne koszty tutaj:

• Selektor #mybutton musi uruchomić natychmiast bez powodu (wynik jest wyrzucany Chcieliśmy po prostu wybrać selektor ... wiążemy się z document). W tym przypadku jest to #id selector, więc jest to bardzo niski koszt ... w innych przypadkach nie jest tani i bardzo nieekonomiczny (na przykład [attr=something]).
• Każdy click, który ma bańki do document, musi teraz zostać sprawdzony pod kątem tego selektora, kosztu oceny za kliknięcie, zależy to od oczekiwanej liczby kliknięć.

---

Teraz spójrzmy na inny sposób:

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

Są 2 główne koszty również tutaj:

• W #mybutton działa selektor, ale tylko raz na żądania ajax . Jednak nie marnujemy go, używamy wyników.
• Handler click jest zobowiązany do rzeczywistego elementu, zamiast document, więc nie ma wiążącej kosztować każdorazowo działa, raczej niż raz

Jednakże, nie ma koszt za kliknięcie, a połączenie selektor nie jest zmarnowany ... więc ogólnie jest lepszy, , ponieważ używasz identyfikatora, nie jest to prawdą w innych przypadkach.

---

W twoim przypadku, ponieważ masz do czynienia z ID (i gwarancją pojedynczy element), jest to znacznie tańsze:

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

W innych przypadkach, gdzie jesteś wiążący setki elementów, .live(), są wyraźnym zwycięzcą, choć byłoby jeszcze lepiej.

Answer 2

Prawdopodobnie trochę, ale nie martwiłbym się tym. Dla mnie metoda .live() wygląda o wiele łatwiejsza do utrzymania, więc użyłbym tego. Dopóki nic nie będzie boleć wolno, nie trzeba się martwić wydajnością w JavaScript.

Answer 3

Z wyglądu funkcji powodzenia dołączasz wydarzenie, ponieważ ten element jest już dostępny w twoim html? Czy tak jest?

Jeśli tak jest, to jeśli funkcja wywoływana za pomocą kliknięcia jest zawsze taka sama, można użyć "na żywo". Na żywo pozwala wiązać się z wydarzeniami, które jeszcze nie istnieją. Możesz to umieścić nawet przed swoim dokumentem. Następnie, gdy ajax aktualizuje twój główny dokument, to wydarzenie powinno zawsze działać. Nie musisz go przypisywać za każdym razem.

Dzięki temu masz pewność, że nie musisz nic robić za każdym razem, gdy wrócisz z wywołania ajax, robisz konfigurację bez polegania na document.ready i gwarantowane działanie.

HTH.