JQuery Kochbuch (German Edition)

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

Vom Netzwerk:

irgendwelcher Code
time( 'erster' );
// interessanter Code
time( 'zweiter' );
// noch mehr interessanter Code
time( 'dritter' );
time.done( '#log' );
Dabei muss Ihre Seite folgenden HTML-Code enthalten:

Nachdem der Code ausgeführt wurde, wird das

mit einer Liste wie der folgenden gefüllt:
0.102 erster
1.044 zweiter
0.089 dritter
1.235 total
    Wir sehen, dass ein Großteil der Zeit zwischen den Aufrufen von
time('erster')
und
time('zweiter')
verbraucht wird.
    ----
    Warning
    Seien Sie vorsichtig bei der Verwendung von Firebug!Wenn Sie auf der Seite, für die Sie gerade Zeiten messen wollen, mit Firebug arbeiten, können die Ergebnisse völlig anders sein. Die JavaScript-Funktion
eval()
, diejQuery 1.3.2 und älter nutzt, um heruntergeladene JSON-Daten zu evaluieren, wird dadurch extrem beeinflusst: Während ein Array mit 10.000 Namen und Adresse im in Tabellen schneller laden genutzten Format normalerweise in Firefox 0,2 Sekunden benötigt, dauert es 55 Sekunden , wenn das Script-Panel von Firebug aktiviert ist. Neuere Versionen von jQuery nutzen dafür
Function()
, was keine Beeinträchtigung durch den Firebug nach sich zieht.
    Wenn der Firebug Ihre Seite so heftig ausbremst und Sie keinen Workaround finden können, sollten Sie eventuell versuchen, ihn zu identifizieren und eine entsprechende Warnung auszugeben:

$(document).ready( function() {
    if( window.console && console.firebug )
     $('#firebugWarning').show();
});
    ----
    Für viele Optimierungs-Versuche ist das ausreichend. Aber was soll man tun, wenn sich der zu prüfende Code in einer Schleife befindet?
for( var i = 0; i < 10; ++i ) {
    // Code
    time( 'erster' );
    // mehr Code
    time( 'zweiter' );
    // noch mehr Code
    time( 'dritter' );
}
time.done( '#log' );
    In diesem Fall wird unser kleiner Profiler diese ersten, zweiten und dritten Einträge jeweils zehn Mal ausgeben! Dies lässt sich zum Glück leicht beheben – wir müssen nur die Zeit, die wir für jedes Label verbraucht haben, aufsummieren, wenn es mehr als ein Mal genutzt wird:
(function() {

    var log = [], index = {}, first, last;

    // Sekunden für die message aufsummieren.
    // Jeder message-String hat seinen eigenen Zähler.
    function add( message, seconds ) {
     var i = index[message];
     if( i == null ) {
     i = log.length;
     index[message] = i;
     log[i] = { message:message, seconds:0 };
     }
     log[i].seconds += seconds;
    }

    time = function( message, since ) {
     var now = +new Date;
     add( message, ( now - ( since || last ) ) / 1000 );
     return last = +new Date;
    }

    time.done = function( sel ) {
     time( 'total', first );
     $(sel).html(
     $.map( log, function( item ) {
     return(
     item.seconds.toFixed(3) +
     ': ' +
     item.message + '
'
     );
     }).join('')
     );
    };

    first = last = +new Date;
})();
    Mit dieser Änderung erhalten wir auch bei der Schleife nützliche Ergebnisse:
0.973 erster
9.719 zweiter
0.804 dritter
11.496 total
    ----
    Wenn Performance-Messungen variieren
    Wenn Sie Performance-Messungen für eine Webseite durchführen, erhalten Sie nicht jedes Mal die gleichen Ergebnisse. Tatsächlich werden die Daten bei jedem Neuladen der Seite ein wenig anders aussehen.
    Was sollten Sie also nun tun, um die »wirklichen« Daten zu erhalten? Den Mittelwert bilden?
    Eher nicht. Hier ein Diagramm für
fillTable()
aus Tabellen schneller laden für 50 aufeinander folgende Läufe mit jeweils 10 Sekunden Abstand:

    Es zeigt sich ein Muster: Ein Großteil der Läufe liegt im Bereich zwischen 150 und 200 Millisekunden, während einige wenige Ausreißer länger brauchen. Es scheint, ein Wert um 175 Millisekunden ist der wahre Wert und die Läufe mit deutlich längerer Laufzeit wurden durch andere Prozesse auf dem Rechner beeinflusst.
    Es kann auch sein, dass einige der länger laufenden Messungen durch die Garbage Collection im Browser beeinflusst wurden. Es wäre sehr schwierig, dies von der Zeit durch andere Prozesse zu trennen, daher ist es vermutlich am einfachsten, diese Ausreißer schlicht zu verwerfen.
    ----

Ihre jQuery-Objekte puffern
    Problem
    Sie protokollieren die verschiedenen Eigenschaften des
event
-Objekts für ein
mousemove
-Event und der Code ist recht langsam, weil er Selektoren vom Typ
$('.classname')
nutzt, um Tabellenfelder durch die Event-Daten zu finden und anzupassen.
    Ihre Seite enthält folgenden HTML-Code für das Protokollieren:

Client X: