Frameworks: Wieso sind diese langsamer als native Implementierungen?

[Fabian Frank]

Moin,

eine Frage, bei der ich mir den Kopf zerbreche und um Himmels Willen nicht vorran komme:

Was macht ein Framework (wie bspw. jQuery) langsamer als eine native Implementierung?

Der Grund für diese Fragestellung ist ganz einfach: Ich sitze derzeit an einem Browser-Addon. Und leider kommt ich um den Wildcard-Selektor und der zugehörigen .each-Schleife von jQuery nicht herum. Was mir jedoch auffällt: Es ist extrem langsam. Und zwar wirklich extrem. Große Experimente innerhalb der .each-Schleife sind dadurch nicht mehr möglich.

Eine Empfehlung war nun den document.querySelectorAll zu verwenden, da dieser im Selektieren schneller sei / ist.

Aber: Wieso ist das so? Was macht jQuery mit dessen Selektor und der .each-Schleife derart anders, dass die Performance-Einbuße derart hoch ist?

Danke für jede Art von Information!

Greetz, Fabi

 

[CPoly]

Das langsame sind die vielen Funktionsaufrufe. Einfach ne Schleife nehmen:

var all = $('*');

for(var i = 0; i < all.length; i++) {
    var $el = all[i];
}

BTW: Wenn dann lieber getElementsByTagName('*') anstatt querySelectorAll, wegen Browserkompatibilität.

 

[Fabian Frank]

Okay, danke dir, das hat schon mal sehr geholfen!

Einziges Problem hierbei: Was erhalte ich dort für Elemente? Zuvor hatte ich in der .each-Schleife ein jQuery-Objekt im Stil el = $(this). Wenn ich jetzt anstatt $(this) nur all[ i ] schreibe, scheint dies kein Jquery-Objekt zu sein, da z.B. als Fehlermeldung im weiteren Verlauf des Skriptes erscheint:
el.css() is not a function.

Sollte nicht durch die ursprüngliche Selektion (var all = $("*")) ein jQuery-Objekt sein?

 

[CPoly]

Was bei mir all[i] ist entspricht deinem this. Es muss also tatsächlich $(all[i]) heißen.

all ist ein jQuery Objekt. Aber ein jQuery Objekt ist ein Array von DOM Elementen.

Siehe: http://robflaherty.github.com/jquery-annotated-source/docs/01-core.html#section-119
Dort wird deiner callback Funktion (die du bei .each hattest) object[i] übergeben, was dort dann this war.

 

[Fabian Frank]

Okay, das ergibt natürlich Sinn, aber eigenartigerweise hängt sich das Skript auf, sobald ich folgenden Code verwende:

var all = $("*");

for (var i = 0; i < all.length; i++) {
    var el = $(all[i]);
}

Wenn ich anstatt dessen die Jquery-Funktion .each verwende, wird dieser wieder langsam, kriegt es jedoch gerade noch so gebacken ohne abzubrechen:

$("*").each(function() {
    var el = $(this);
});

Hast du eine Idee, woran das liegen könnte?

 

[CPoly]

Bei mir läuft das ohne Probleme: https://tinker.io/7ec40/1
Allerdings ist .each doch nicht signifikant langsamer, ich bin fest davon ausgegangen (wobei die Ergebnisse hier meinem Test widersprechen (http://jsperf.com/jquery-each-vs-for-loop/69).

Was machst du denn in der Schleife? Mit den 5000 span Elementen läuft das in 500ms durch.

 

[Fabian Frank]

Heiliger Strohsack, die Ergebnisse sind ja ganz schön unerwartet! Das mit dem Caching ist ein interessanter Punkt, über den ich so noch nicht nachgedacht habe aber, dass jQuery.each() derart fix sein soll, wirkt für mich eher wie Magie.

In der For-Schleife ist u.a. auch noch eine weitere Schleife mit ca. 15 durchgängen. Das ist ingesamt ne ziemlich heikle Angelegenheit, aber gut. ich danke dir jedenfalls schon mal sehr für deine Hilfe

 

[CPoly]

Falls du den Code nicht hier posten willst, kannst du mir auch eine PM schicken. Ich bin sicher der lässt sich optimieren.