2010-04-18 1 views
6

Typische jQuery Übernutzung:Wie kann jQuery nicht überbeansprucht werden?

$('button').click(function() { 
    alert('Button clicked: ' + this.id); 
}); 

Welche Art und Weise schneller ist:

$('button').click(function() { 
    alert('Button clicked: ' + $(this).attr('id')); 
}); 

Welche werden vereinfacht.

Können Sie mir weitere Beispiele für ähnliche jQuery-Überbenutzung geben?

+2

Poll-Typ Frage: Community Wiki ? – mnemosyn

+7

Ich stimme nicht mit * Weg * schneller überein. Dies geschieht einmal für 1 Klick, was ein Unterschied ist, den Sie buchstäblich * nicht * messen können. Es würde Zehntausende von Hunderttausenden von Iterationen benötigen, um hier einen messbaren Unterschied zu erzielen. Wenn es in einer Schleife war, dann ist es ein gültiger Punkt ... in Ihrem Beispiel ist es das jedoch nicht, zumindest vom Standpunkt der Leistung. –

Antwort

3

IMHO, sind diese Dinge nicht zu kümmern.

Die $ -Funktion ist unglaublich schnell und garantiert Cross-Browser-Probleme werden kein Problem sein. Zum Beispiel, das könnte jetzt gut funktionieren, aber was passiert, wenn IE9 herauskommt und es bricht? Wenn Sie die $ -Funktion überall verwenden, wird sie durch eine Korrektur an einem Ort überall behoben. Ganz zu schweigen davon, dass ich mir keinen Fall vorstellen kann, in dem dies zu einer Leistungssteigerung führen würde.

Wenn Sie also keine Probleme mit der Leistung haben, machen Sie sich keine Sorgen über Mikrooptimierungen. jQuery 1.4 hatte einige große Leistungssteigerungen wie auch immer, es sei denn, Sie tun:

$('p>a:first-child+input[type=text]~span'); 

überall ohne Caching, Sie gehen zu keine Rückkehr auf Ihre Zeit Investition.

8

Der zweite Weg ist natürlich schneller, da es die ID-Eigenschaft direkt vom DOM-Objekt erhält, daher gibt es mindestens einen Funktionsaufruf weniger.

Das sagte, der Unterschied wäre sowieso nicht wahrnehmbar und nichts zu befürchten, und so werde ich wagen zu sagen, dass das erste Beispiel nicht ein Beispiel für eine Übernutzung ist.

+1

+1 Genau. Vielleicht ein Beispiel für unnötigen Gebrauch, aber nicht für übermäßigen Gebrauch. –

2

Das Beispiel in der Frage ist IMO nicht zu verwenden, nicht wegen der Leistungsbedenken, sondern weil die einfache JavaScript-Version wesentlich besser lesbar ist.

ähnlich td.cellIndex und tr.rowIndex sind viel besser lesbar (wie auch schneller) als die üblicherweise gegebenen Hacks wie $(this).parent().children().index(this) und einfache Eigenschaften wie this.checked sind IMO besser als $(this).is(':checked').

Innerhalb von jQuery sollten Sie lieber jQuery-Wrapper-Methoden als die Versionen verwenden, die in Nicht-Standard-Selektoren eingebettet sind.

$('#thing .thing').last() 

kann schnell sein, weil die Wähler auf den schnellen Einbau-querySelectorAll Anruf auf modernen Browser übergeben werden.

$('#thing .thing:last') 

wird relativ langsam sein.

Achten Sie auch auf Selektor-String-slinging, die in der Regel eine schlechte Sache ist:

$('div.'+className) 

wird so bald brechen, wie ein Klassenname mit einem Punkt gibt es (oder verschiedene andere Interpunktion) darin. Vermeiden Sie eine Selektorzeichenfolge, wenn es eine zuverlässigere Testmethode gibt.

4

„Wir sollten etwa 97% der Zeit über kleine Effizienz, sagen vergessen: vorzeitige Optimierung ist die Wurzel aller Übel“

       -- Donald Knuth (probably) 

Aus anwendungstechnischer Sicht, ist es wahrscheinlich fällt in die 97%.

„Es gibt zwei Möglichkeiten, ein Software-Designs Konstruktion: Eine Möglichkeit ist, um es so einfach, dass es offensichtlich keine Mängel, und der andere Weg ist, um machen es so kompliziert, dass es keine offensichtlichen Mängel. Die erste Methode ist viel schwieriger. "

       -- C.A.R. Hoare 

Aus Komplexität Standpunkt, Einfachheit, Klarheit und Verständlichkeit sind gute Motivation.

3

jQuery Über-Verwendung?

Diese Mitteilung dieser Stelle nicht tun

$('.link').click(function(){ 
    $(this).attr("height", "99px"); 
    $(this).attr("width", "302px"); 
    $(this).css("left", "329px"); 
    $(this).attr("position", "absolute"); 
    ... 
}); 

tun

.my-class { 
    background:url("/images/bg.png") no-repeat scroll 0 0 transparent; 
    height:99px; 
    left:329px; 
    position:absolute; 
    top:419px; 
    width:302px; 
    } 

$('.link').click(function(){ 
     $(this).addClass('my-class'); 
    }); 

, wenn Sie absolut haben [nicht zu wissen, CSS ist keine gültige Ausrede]

Verwandte Themen