JQuery Kochbuch (German Edition)

class="name">';
     html[++h] = e(name.first);
     html[++h] = ' ';
     html[++h] = e(name.last);
     html[++h] = '';
     html[++h] = e(name.street);
     html[++h] = '
';
     html[++h] = e(name.city);
     html[++h] = ', ';
     html[++h] = e(name.state);
     html[++h] = ' ';
     html[++h] = e(name.zip);
     html[++h] = '';
     }
     html[++h] = '';
     html[++h] = '';

     $('#container')[0].innerHTML = html.join('');
    }

    $.getJSON( 'names/names-1000.json', function( json ) {
     fillTable( json.names );
    });
});
    Für den neuen Code muss auch der HTML-Code ein wenig anders aussehen:

    Auf einem Testsystem mit IE7 läuft der neue Code in 0,2 Sekunden anstatt in 7 Sekunden ab. Das ist 35 Mal schneller!
    Zugegeben – dieser Code ist nicht so sauber und elegant wie der ursprüngliche Code, aber die Besucher Ihrer Site werden das nie erfahren und sich auch nicht darum scheren. Aber sie werden merken, wie viel schneller Ihre Seiten geladen werden.
    Diskussion
    Manchmal haben Sie Glück und finden die eine Optimierung, die ein Performance-Problem ganz alleine löst. Manchmal – wie in diesem Rezept – brauchen Sie eine Reihe von Tricks, um die gewünschte Geschwindigkeit zu erzielen.
    Der größte Geschwindigkeitsschub stellt sich in diesem Code dadurch ein, dass einmalig ein

-Elements mit all seinen Kind-Elementen in einer einzelnen DOM-Operation eingefügt wird, anstatt eine größere Zahl von

-Elementennacheinander. Dazu müssen Sie die gesamte Tabelle als HTML-Code erzeugen. Sie fügen also eine große Zahl von Strings aneinander, was je nach der gewählten Vorgehensweise ein sehr schneller oder sehr langsamer Vorgang sein kann. Und wenn man über 1.000 Elemente laufen muss, lohnt es sich, die schnellste Variante herauszufinden.
    Sie fragen sich vielleicht: »Ist das immer noch jQuery-Code? Es sieht doch eher wie gutes, altes JavaScript aus!« Stimmt – beides. Es ist absolut in Ordnung, jQuery-Code mit anderem JavaScript-Code zu mischen. Sie können für einen Großteil der Site einfachere jQuery-Wege gehen und beim Ausmerzen von langsamen Stellen entweder schnellere jQuery-Techniken finden oder klassisches JavaScript nutzen, um die Performance zu verbessern.

Schleifen programmieren
    Problem
    Sie rufen
$.each(array,fn)
oder
$(selector).each(fn)
auf, um in Ihrem Code über tausende von Elementen zu iterieren, und vermuten, dass all diese Funktionsaufrufe das Laden Ihrer Seite verlängern:
$.each( array, function() {
    // tue etwas mit this });
    oder
$('.lotsOfElements').each( function() {
    // tue etwas mit this oder $(this) });
    Lösung
    Verwenden Sie eine
for
-Schleife anstelle von
.each()
. Um über ein Array zu iterieren, gibt es kaum eine schnellere Möglichkeit:
for( var item, i = −1; item = array[++i] ) {
    // tue etwas mit item }
    Aber sie hat einen Nachteil: diese Schleife funktioniert nur, wenn Ihr Array keine »leeren« Elemente enthält, also Elemente, deren Wert
undefined
,
null
,
false
,
0
oder
""
ist. Selbst mit dieser Einschränkung ist diese Schleife jedoch in vielen häufig auftretenden Situationen nützlich, zum Beispiel beim Iterieren über ein jQuery-Objekt. Stellen Sie nur sicher, dass Sie das Objekt in einer Variablen puffern:
var $items = $('.lotsOfElements');
for( var item, i = −1; item = $item[++i] ) {
    // tue etwas mit item (ein DOM-Knoten)
}
    Häufig liegen auch JSON-Daten vor, die ein Array mit Objekten enthalten – wie bei unserem Beispiel aus Tabellen schneller laden :
{
    "names": [
     {
     // ...
     "zip": "48786"
     },
     // für 1000 Namen wiederholt
    ]
}
    Wenn Sie wissen, dass keines dieser Objekte, die das Array
names
aufbauen, jemals null sein wird, können Sie die schnelle Schleife nutzen.
    Ein allgemeinerer Ansatz, der mit jedem Array funktioniert, ist die klassische Schleife, aud die Sie immer wieder stoßen werden:
for( var i = 0; i < array.length; i++ ) {
     var item = array[i];
    // tue etwas mit item }
    Doch diese Schleife lässt sich trotzdem auf unterschiedliche Weisen verbessern:
    Puffern der Arraylänge
Verwenden von
++i
, was in manchen Browsern schneller ist als
i++
Kombinieren des Tests mit der Erhöhung der Schleifenvariablen zur Vermeidung eines Name Lookups
    Das Ergebnis ist:
for( var i = −1, n = array.length; ++i < n; ) {
    var item = array[i];
    // tue etwas mit item }
    ----
    Note
    Wäre es vielleicht sogar noch schneller, eine
while
-Schleife oder eine
do...while
-Schleife zu nutzen? Wahrscheinlich