Profilerstellung von jQuery-Anwendungen

Question

Ich bin kürzlich auf einen langsam reagierenden Skriptfehler in einer Anwendung gestoßen, und ich hatte das Bedürfnis, die Anwendung zu profilieren, um festzustellen, was ich verbessern muss. Ich möchte eine langfristige Lösung, keine hackische Lösung. Ich habe den Firebug Profiler ausprobiert, aber da die Anwendung eine Menge jQuery verwendet, erhalte ich viele Berichte über anonyme Anrufe, die ich eigentlich erwartet habe.

Ich habe auch einige Berichte im Web über einen von John Resig erstellten Profiler gefunden, aber die Links, die ich gefunden habe, waren alle tot.

Also meine Fragen sind:

1. Was sind die besten Möglichkeiten, um eine jQuery-Anwendung zu profilieren?
2. Gibt es irgendwelche opensource dedizierte Tools/Skripte, um dies zu erreichen?

Answer 1

Also nach dem Graben ein wenig mehr habe ich eine andere Lösung von John Resig gegeben. Er verwendete eine Unit-Testing-Erweiterung für Firebug namens FireUnit (http://fireunit.org/), die sich als recht nett herausstellte.

Wenn Sie einen Blick auf die gegebenen Beispiele auf:

http://ejohn.org/blog/function-call-profiling/

Und auch die Testseite überprüfen er bietet:

http://ejohn.org/files/jquery-profile.html

Was? Sie erhalten einige schöne Ergebnisse wie zB:

.addClass ("test"); 52
.addClass ("Test"); 102
.removeClass ("Test"); 102
.removeClass ("Test"); 52
.css ("Farbe", "rot"); 299 O (3n)
.css ({color: "rot", Rahmen: "1px solid red"}); 597 O (6n)
.remove(); 198 O (2n)
.append ("Test"); 599 O (6n)
.show(); 982 O (10n)
.Hide(); 968 O (10n)
.html ("Test"); 104
.empty(); 100
.is ("div"); 109
.filter ("div"); 214 O (2n)
.finden ("div"); 300 O (3n)

Ich habe es geschafft, dies in mehrere Anwendungen zu integrieren und die Ergebnisse sind mehr als zufriedenstellend. Der einzige Nachteil ist, dass Sie das Plugin nur in Firefox verwenden können. Aber das ist immer noch ein nettes Werkzeug.

Answer 2

Wie bereits erwähnt here:

IE, Chrome und Safari haben Werkzeuge in Profilometer in der Web-Entwicklung gebaut, die mit dem Browser versenden. Für Firefox können Sie Firebug verwenden. Auch nützlich sein kann, da Sie jQuery verwenden, was bedeutet, dass Ihre Profiling-Bericht wird mit anonymen Funktionen und gleich, macht es ziemlich unlesbar, John Resig's jQuery profiling plugin, die geben Ihnen eine klarere Ausgabe über die Angelegenheit.

Answer 3

ich ein Werkzeug geschaffen, das ganz genau das tut, was Sie brauchen: http://yellowlab.tools

Starten Sie einen Test, klicken Sie auf „JS Timeline“ Registerkarte und protokolliert alle jQuery-Funktionen, die das DOM beim Laden der Seite zuzugreifen. Es verfolgt auch Vanilla JS-Funktionen, so dass Sie die Magie hinter jQuery verstehen können.

Sehr nützlich, um einige jQuery-Code für die Leistung zu optimieren.

Hoffnung meine Antwort nicht zu spät kommt :)