JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts

Vom Netzwerk:

.clientX') // Vielleicht viel schneller
$('#log td.clientX') // In manchen Browsern vielleicht am schnellsten
    ----
    Note
    Hüten Sie sich vor Selektions-Testseiten, die nicht den Inhalt der aktuellen Seite widerspiegeln. In einer sehr einfachen Seite kann ein einfaches
$('.clientX')
schneller als ein komplizierterer Selektor wie
$('#log td.clientX')
sein – selbst in Browsern und jQuery-Versionen, in denen Sie davon ausgehen können, dass der Klassen-Selektor langsam ist.
    Dies liegt nur daran, dass kompliziertere Selektoren mehr Zeit beim Initialisieren brauchen, was auf einer einfachen Seite die Performance dominieren kann.
    Die Testseite für dieses Rezept enthält mit Absicht eine große Zahl an Elementen, um Selektions-Performanceprobleme zu erzeugen, die sich nur in großen Seiten zeigen.
    Aber natürlich zeigt keine davon, wie sich ein Selektor auf Ihrer Seite verhält. Die einzige Möglichkeit, herauszufinden, welcher Selektor auf einer bestimmten Seite am schnellsten ist, besteht im Testen mit genau dieser Seite.
    ----
    Diskussion
    Man vergisst leicht, dass ein unschuldig wirkender Aufruf wie
$('.clientX')
durchaus merklich Zeit kosten kann. Abhängig vom Browser und der jQuery-Version kann es sein, dass der Selektor jedes DOM-Element auf Ihrer Seite anfassen und durchlaufen muss, um die angegebene Klasse zu finden.
    jQuery-Versionen vor 1.3 nutzen diese langsame Methode in jedem Browser. Mit jQuery 1.3 wurde die Sizzle-Selektor-Engine eingeführt, die schnelle DOM-APIs in neueren Browsern nutzt, zum Beispiel
getElementsByClassName()
und
querySelectorAll()
.
    Allerdings werden Sie bei den meisten Webseiten den IE 7 unterstützen müssen, bei dem Klassen-Selektoren auf einer komplexen Seite langsam sind.
    Wenn möglich sollten Sie wie in
$('#myid')
über die ID selektieren – dies ist im allgemeinen in allen Browsern ein sehr schneller Vorgang, da nur
getElementById()
aufgerufen werden muss.
    Es ist auch hilfreich, die Menge an Elementen, die durchsucht werden soll, möglichst weit einzuschränken – zum Beispiel über die Angabe eines Eltern-Elements, über das Spezifizieren des Klassen-Selektors durch einen Tag-Namen oder durch die Kombination solcher Tricks.

Tabellen schneller laden
    Problem
    Sie laden ein JSON-Datenobjekt mit 1.000 Namen und Adressen und verwenden jQuery, um daraus eine Tabelle zu erzeugen. Es dauert 5 bis 10 Sekunden, um die Tabelle im IE7 zu erstellen – und das ohne die Zeit zum Herunterladen.
    Ihre JSON-Daten liegen in diesem Format vor:
{
    "names": [
     {
     "first": "Azzie",
     "last": "Zalenski",
     "street": "9554 Niemann Crest",
     "city": "Quinteros Divide",
     "state": "VA",
     "zip": "48786"
     },
     // und das für 1.000 Namen
    ]
}
    Ihr JavaScript-Code:
// Zurückgeben einer gesäuberten Version, in der & < > maskiert sind
function esc( text ) {
    return text
     .replace( '&', '&' )
     .replace( '<', '<' )
     .replace( '>', '>' );
}
$(document).ready( function() {

    function fillTable( names ) {
     $.each( names, function() {
     $('')
     .append( $('').addClass('name').html(
     esc(this.first) + ' ' + esc(this.last)
     ) )
     .append( $('').addClass('address').html(
     esc(this.street) + '
' +
     esc(this.city) + ', ' +
     esc(this.state) + ' ' + esc(this.zip)
     ) )
     .appendTo('#nameTable');
     });
    }

    $.getJSON( 'names/names-1000.json', function( json ) {
     fillTable( json.names );
    });
});
    Und Ihr Dokument enthält folgenden HTML-Code:

    Das funktioniert gut, wie man an der Ausgabe in Figure 5-1 sieht.
    Figure 5-1. Browser-Ausgabe für die Namens-Tabelle
    Nur ist es sooo langsam.
    Lösung
    Kombinieren Sie mehrere Optimierungsschritte:
    Fügen Sie ein einzelnes

- oder

-Tag anstatt vieler

-Elemente ein.
Nutzen Sie
.innerHTML
oder
.html()
anstelle der Methoden zur DOM-Beeinflussung.
Erstellen Sie ein Array mit
a[++i]
und fügen Sie es per
.join()
zusammen, anstatt Strings aneinanderzuhängen.
Greifen Sie auf eine klassische
for
-Schleife zu, anstatt
$.each
zu nutzen.
Verringern Sie die Anzahl an Name Lookups.
    Das Ergebnis ist diese neue Version des Codes (mit der gleichen
esc()
-Funktion wie zuvor):
$(document).ready( function() {

    function fillTable( names ) {
     // Weniger Name Lookups mit lokalen Funktionsnamen
     var e = esc;
     //
     var html = [], h = −1;
     html[++h] = '

';
     html[++h] = '';
     for( var name, i = −1; name = names[++i]; ) {
     html[++h] = '