jQuery bind() unbind() und on() und off()

Question

Ich arbeite an einem kleinen Adminbereich für eine Webseite.

Ist es sinnvoll, Ereignisse zur Leistungssteigerung zu lösen (Client)? Oder kostet es mehr Leistung, um Ereignisse zu lösen und 30 Sekunden später erneut zu binden?

Meine Fragen: Ist die Idee hinter bind() - unbind() oder on() off() nur die clientbasierte Performance zu erhöhen oder sollte ich sie für andere Szenarien verwenden? Diese Frage kommt, weil mein Javascript Code wächst und wächst (ca. 30%) wegen der Aufhebung der Ereignisse. Und ich denke, dass einige Dinge nicht funktionieren, wenn der Benutzer nicht interagiert, wie ich will ...

.

EDIT: Die meisten Zeiten bin binding/lösen keypress Ereignisse, weil ich die Pfeiltasten für diff. Szenarien.

Answer 1

Wenn Sie versuchen, zu binden und zu lösen, erstellen Sie Race Conditions, damit der Garbage Collector tatsächlich reinkommt und Ihren Code aufräumt. Es ist am besten, einmal zu binden und nicht erneut zu binden. Wenn Ihre Clientseite voraussichtlich über längere Zeiträume (Wochen, Monate) ausgeführt wird, sollten Sie die Speicherverwaltung und Speicherlecks in Betracht ziehen, da diese eher die Leistung beeinträchtigen.

Binding-Binding (wenn nicht richtig gemacht) kann zu Speicherlecks führen, die schwer zu finden sind. Wenn Sie Webkit verwenden, nehmen Sie die Heap-Snapshots Ihrer Leistung mit einmaliger Bindung und einmaliger Bindung auf, und Sie können dann die beste Entscheidung treffen.

Hier ist ein Link:

http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/

Answer 2

Unbinding nur wieder zu binden, aus Performance-Gründen ist wahrscheinlich fehleranfällig und macht die Dinge zu kompliziert in den meisten Fällen.

Anstatt Ereignis-Listener an viele bestimmte DOM-Elemente zu binden, könnten Sie einen "Vogelschau" -Ansatz verwenden und nur einige Listener am oberen Ende des DOM-Baums binden. Wenn das Ereignis ausgelöst wird, überprüfen Sie, was tatsächlich passiert ist geklickt.

Auf diese Weise verbringen Sie keine CPU beim Binden/Lösen von vielen Ereignis-Listenern, sondern nehmen einen kleinen CPU-Treffer, wenn ein Ereignis verarbeitet wird (was normalerweise nicht wahrnehmbar ist).

im Detail Dieser hier abgedeckt: event delegation vs direct binding when adding complex elements to a page

Answer 3

Eine Lösung dazu, um zu vermeiden, sorgt vor allem, wenn Sie mit ständig wechselnden Elementen oder großen Mengen beschäftigen, ist Ihre Veranstaltung mit dem Körper registrieren und dann angeben Selektorargument.

So:

$("body").on("click", ".my-actual-element", function(aEvent) { 
    // Event handler code goes here. 
}); 

Mehr hier $.on().