jQuery, einige Tipps für die Leistungssteigerung deines Codes. (Teil 2)

jQuery, einige Tipps für die Leistungssteigerung deines Codes. (Teil 2)

Posted by ariesprodesign in JavaScript, jQuery, Programmierung, Webdesign 09 Jun 2014

Wie ich euch in meinem vorherigen Beitrag versprochen habe, gebe ich euch in diesen Beitrag weitere Tipps, wie Ihr euren JQuery-Code performanter machen könnt. Ich werde euch zeigen, wie mit ein paar Maßnahmen, der Browser euren Code bis zur 10 Mal schneller verarbeiten kann.

1 bis 4 findet Ihr hier: jQuery, einige Tipps für die Leistungssteigerung deines Codes. (Teil 1)

5. Optimierung von Selektoren.

Die Selektoren-Optimierung ist weniger wichtig, als es früher war, aufgrund der Umsetzung in einigen Browsern von document.querySelectorAll (), übergibt jQuery die Aufgabe an den Browser. Allerdings gibt es einige Tipps, die Sie beachten sollten.

Es ist immer besser, die Auswahl mit einer ID zu starten.

Schnell:

Superschnell: 

Das Beispiel mit $. fn.find ist schneller, weil die im Gegensatz zu dem ersten Beispiel, die document.getElementById-Funktion verwendet, die ist extrem schnell, da es eine native Funktion des Browsers ist. Bei dem ersten Beispiel wird die interne jQuery-Engine Sizzle verwendet.

6. Spezifität

Versuchen Sie, für die rechte Seite der Auswahl spezifischer zu sein als für die linke Seite.

Wenig optimmiert:

 Optimiert:

Verwenden Sie wenn möglich, tag.clase auf der rechten Seite der Markierung, und nur Tag oder .clase auf der linken Seite.

 Besser:      

Die zweite Auswahl hat bessere Leistung, da es weniger Schichten durchlaufen muss, um das Element zu finden.

7. Vermeiden Sie den Universal-Selektor

Implizite oder explizite universelle Selektionen können sehr langsam sein.

8. Delegieren Sie Ereignisse (Events)

Die Delegation der Events ermöglicht Sie einen Eventshandler an ein Element (z. B. eine ungeordnete Liste) anstatt an mehreren Content-Elementen (z. B. Elemente in einer Liste) zu binden. jQuery erleichtert diese Arbeit durch $fn.live und $ fn.delegate. Wenn möglich, empfehlt es sich, $fn.delegate statt $. fn.live., zu verwenden, da die Notwendigkeit für eine Auswahl entfällt und seinem expliziten Kontext die Belastung von bis zu 80% reduziert.

Darüber hinaus ermöglicht die Delegation der Events, neue Container-Elemente auf der Seite hinzuzufügen, ohne Ihre Eventshandler neu verknüpfen zu müssen.

Schlecht (Wenn es mehr als ein Element auf der Liste gibt):

 Besser mit $.fn.live

 Viel besser mit $.fn.delegate:  

9. Trennen Sie Elemente, um mit ihnen zu arbeiten

Wenn möglich, vermeiden Sie direkte DOM-Manipulationen. Zur Unterstützung bei diesem Zweck, stellt jQuery ab Version 1.4 die Funktion $. Fn.detach zur Verfügung, die Funktion ermöglicht DOM-Elemente getrennt von dem DOM zu verarbeiten und dann später wieder hinzuzufügen.

10. Verwenden Sie Cascading Stylesheets CSS für Änderungen in mehreren Elementen

Wenn Sie die CSS-Eigenschaften von mehr als 20 Elementen ändern müssen, dann machen Sie das lieber in einem Style-Tag auf den Header. So erreichen Sie 60% mehr Leistung.

bei weniger als 20 Elementen:

Bei mehr als 20 Elementen, lieber so:

11. Versuchen Sie, keine nicht existierenden Elemente anzusprechen.

Wenn Sie versuchen, ein nicht vorhandenes Element anzusprechen, wird alles ausgeführt, als ob alles in Ordnung wäre. Die Zeit können Sie sich sparen, in dem Sie erst überprüfen, ob das Element vorhanden ist.

Falsch:

 Besser:

 Noch besser:

Ich hoffe, ich konnte euch weiterhelfen.

Schreiben Sie einen Kommentar