Wirkt sich das hinzufügen zu viele Ereignis-Listener auf die Leistung auswirken?

Ich habe eine Allgemeine Frage zu javascript (jQuery) events/Listenern.
Gibt es ein limit für die Anzahl der Klick-listener, ohne performance-Probleme?

  • Braucht mehr content wirklich. ein click-handler wird nicht geben Ihnen perf Probleme, es ist, dass Handlungen, klicken Sie auf das 'können' Probleme verursachen. auch, mit einem Klick könnte verpflichtet werden, 1 element, oder 20.000 Elemente, also weitere Infos benötigt wird.
  • Wenn ich auf mehrere Elemente ein Klick-listener mit jquery. Das ist das, was ich meine. Die ganze app hat um es zu hören. Ich spreche von 5-20 Klick-listener. Ich weiß nicht, ob das ein problem ist, das ist, warum ich Frage 🙂
  • Hier ist ein jsperf - test, der auf click-Ereignisse gebunden, um eine oder viele Elemente, die Sie werden sehen, dass, obwohl nur ein Ereignis gebunden ist, die Anzahl der Elemente, die Auswahl hat einen größeren Einfluss. also, die Wirkung perf viel mehr dann die Zahl der Ereignisse. Der test (nur aktualisiert), zeigt auch, wie würden Sie eine Bindung zu einem Elternteil, zur Verbesserung der perf Bindung zu viele Elemente. (funktioniert der Schnellste hier, wie es eine id
  • Ich werde prüfen, ob ich verstanden Sie. Wenn ich also 10 Zuhörer auf 10 verschiedenen Elementen ist weniger ein perf problem, als ein Zuhörer auf 10 Elemente mit der gleichen Klasse?
  • Es geht mehr um die Anzahl der Elemente und wie Sie ausgewählt werden, anstatt das hinzufügen der Veranstaltung ist es selbst. d.h. das perf test zeigt, dass die Zugabe von 3 separate Ereignisse, um ein element mit einem id ist in etwa so schnell wie das hinzufügen von ein Ereignis mit einem class, also das hinzufügen der Veranstaltung nicht wirklich Auswirkungen perf, seine, wie man die Elemente (und wie viele Elemente), das einen Effekt hat
  • Das scheint nicht mehr der Fall, momentan ist der test läuft '42% langsamer" für das id-element mit 3 Veranstaltungen angebracht, vs-1-event auf ein class-Selektor
  • sehr gut möglich, das war 4 Jahre her, ich Stelle mir gerade die Aktualisierung der jquery-Versionen, um eine Letzte würde geben auch sehr unterschiedliche Ergebnisse

InformationsquelleAutor Bernhard Pointner | 2015-02-20
  1. 29

    In Bezug auf die Leistung, die Anzahl der Elemente der Fall ist, gebunden ist, wo Sie sehen würden, irgendwelche Probleme.

    Hier ist ein jsperf-test. Sie werden sehen, dass die Bindung an viele Elemente ist viel langsamer, obwohl nur ein Ereignis gebunden wird, in jedem Fall.

    Den 3. test in der jsperf zeigt, wie würden Sie binden die Veranstaltung zu einem übergeordneten element, und verwenden Sie die delegation zu hören, für die Elemente, die Sie wollen. (In diesem Fall .many)

    n.b. Der test zeigt, dass die 3. option ist die Schnellste, aber das ist, weil es der auf das element mit einem id und nicht die Klasse.

    Update: Hier ist noch ein perf test zeigt 3 events an einem id vs ein Ereignis gebunden, mit einem class

    • Danke für deine Antwort @atmd - jsperf-test demonstriert das problem hervorragend
    • Ich +1 würden diese Antwort als gut. Im Allgemeinen, wenn Sie mit jQuery, versuchen Sie, zu Gunsten der Delegierten zusätzliches argument bei der Verwendung von $(element).on()... also statt $('ul li').auf('click', callback)` Verwenden $('ul').on('click', 'li', callback).
    • Vereinbart. Ich aktualisieren könnte die Antwort irgendwann mit jsperf es, die Auswirkungen der delegation. es wäre interessant zu sehen, ob/wie sich die Anzahl der untergeordneten Elemente (in deinem Beispiel die li) Auswirkungen
    • Ich denke, deine Messungen sind tangential zu der eigentlichen Frage (wie ich es gelesen habe.) Anstelle der Messung der Leistung einer Anwendung mit weniger / mehr Bindungen, Sie sind die Messung der Kosten für die Einrichtung der Bindungen in den ersten Platz.
    • das wäre sicherlich eine Voraussetzung
    • jsperf ist downs seit einem Jahr, wäre schön, aktualisieren Sie die Antwort mit immer noch vorhandenen performance-tests zur Veranschaulichung der Antwort
    • jsperf funktioniert gut hier. Keine Notwendigkeit zu aktualisieren, die Antwort.
    • jsperf ist unten, Fehler 500
    • LGTM, ich kann mir vorstellen wie jede Website wird nach unten gehen, von Zeit zu Zeit

    InformationsquelleAutor atmd
Schreibe einen Kommentar