2015-02-20 9 views
23

Mam ogólne pytanie dotyczące zdarzeń/słuchaczy javascript (jQuery). Czy istnieje limit liczby odbiorców nasłuchujących bez problemów z wydajnością?Czy dodanie zbyt wielu detektorów zdarzeń wpływa na wydajność?

+0

potrzebuje więcej treści naprawdę. obsługa kliknięć nie zapewni ci doskonałych problemów, to działania podejmowane na kliknięciu, które "mogą" powodować problemy. również jedno kliknięcie może być powiązane z 1 elementem lub 20 000 elementów, więc potrzebnych jest więcej informacji. – atmd

+0

Jeśli umieścić na kilku elemts clickener z jquery. To co mam na myśli. Cała aplikacja musi go słuchać. Mówię o słuchaczu z 5-20 kliknięciami. Nie wiem, czy to jest problem, dlatego pytam :) –

+0

Oto test [jsperf] (http://jsperf.com/click-perf) w przypadku zdarzeń kliknięcia związanych z jednym lub wieloma elementami, zobaczysz, że nawet jeśli tylko jedno wydarzenie jest powiązane, liczba elementów pasujących do tego wyboru ma większy wpływ. tak, że wpłynie to znacznie lepiej niż liczba zdarzeń. Test (właśnie zaktualizowany) pokazuje również, w jaki sposób wiązałeś się z rodzicem, aby ulepszyć wiązanie wielu elementów. (działa najszybciej tutaj, ponieważ jest to "id" – atmd

Odpowiedz

20

Pod względem wydajności liczba elementów, do których odnosi się wydarzenie, to miejsca, w których występują problemy.

Oto jsperf test. Zobaczysz, że wiązanie wielu elementów jest znacznie wolniejsze, mimo że tylko jedno zdarzenie jest wiązane w każdym przypadku.

Trzeci test w jsperf pokazuje, jak powiązać zdarzenie z elementem nadrzędnym i użyć delegacji do odsłuchiwania żądanych elementów. (W tym przypadku .many)

n.b. Test pokazuje, że trzecia opcja jest najszybsza, ale dzieje się tak dlatego, że celuje w element z wartością id, a nie klasą.

Aktualizacja: Oto kolejny perf test Pokazuje 3 zdarzenia związane do id vs jednym zdarzeniem związanym z użyciem class

+2

Dziękuję za odpowiedź @atmd - Test [jsperf] (http://jsperf.com/click-perf) zademonstrował problem znakomicie –

+0

I + 1'd tej odpowiedzi.Od razu, jeśli używasz jQuery, spróbuj faworyzować delegowany dodatkowy argument przy użyciu '$ (element). on() '... tak zamiast zamiast $ ('ul li'). on ('click', callback)' Użyj '$ ('ul'). on (" click "," li ", callback) '. – ded

+0

@ded Agreed. Mogę zaktualizować odpowiedź w pewnym momencie za pomocą jsperf, aby pokazać efekty delegacji. byłoby interesujące zobaczyć, czy/jak liczba elementów podrzędnych (w twoim przykładzie 'li') wpływa na to. – atmd

Powiązane problemy