Wie kann ich den Flaschenhals beim Laden der Seite ermitteln?

Question

Ich habe eine Seite, die jQuery UI verwendet und den Datepicker auf 2 verschiedenen Textfeldern aufruft. Ohne die Anrufe, dh. Wenn Sie nur die Seite laden, ohne Datumseinträge hinzuzufügen, wird die Seite in 1,20 Sekunden geladen. Wenn die Datumsauswahl angehängt ist, wird die Seite in 3,92 Sekunden geladen. (das ist in firefox)

Wie kann ich diese Geschwindigkeit erreichen? Basierend auf dem Netzwerkdiagramm in Firebug handelt es sich hierbei nicht um ein Netzwerkproblem, sondern scheint in den Dateityp-Anhängen zu enden. Gibt es eine Möglichkeit, dies zu beschleunigen?

Auch das Verhalten wird nur in Firefox 3.0.11 gesehen. Chrome ist schnell und zippy, und so ist IE7.

Answer 1

dfa hatte es richtig in den Kommentaren zu meinem Hauptpost. Das Problem war Firebug. Ich denke, es hat einfach nicht gut mit dem Datepicker geladen. Sobald der Firefow ausgeschaltet wurde, lagen die Ladezeiten der Seiten bei etwa 0,5 Sekunden genau dort, wo sie sein sollten.

Answer 2

Ich schlage vor, diesen Link zu sehen: http://net.tutsplus.com/articles/web-roundups/20-tools-to-make-the-life-of-a-web-developer-easier/. Dort finden Sie einen Link zu http://tools.pingdom.com/, mit dem Sie Probleme beim Laden der Seite feststellen können. Probieren Sie die zwei Versionen Ihrer Seite aus und sehen Sie, was dieses Tool für Sie entdeckt.

Answer 3

Versuchen Sie Firebug's code profiler zu laufen, um zu sehen, welche Funktionen Dinge herunterfahren. Im Grunde, drücken Sie die "Profil" -Taste, aktualisieren Sie die Seite, lassen Sie es laden, dann drücken Sie die Schaltfläche "Profil" erneut, um eine Auslese von dem, was die meisten Ressourcen verbraucht oder die längste Zeit zu nehmen.

Der Profiler sollte Ihnen eine Vorstellung davon geben, was tuckert: ob es in Ihrem Code oder etwas in jQuery UI ist.

In einem allgemeineren Sinne, stellen Sie sicher, dass Sie effiziente Selektoren verwenden, um die Elemente auszuwählen, an die Sie Ihre Datumsauswahl binden. Ist es auch möglich, dass die Datumsauswahl etwas in das DOM (Stylesheet, Bilder usw.) einspeist, was zu Engpässen führt (es ist schon eine Weile her, dass ich die Datumsauswahl von jQuery UI verwendet habe, was vielleicht kein Problem ist)?

Answer 4

Verwenden Sie die Plugins FireBug und YSlow für FireFox. Ersteres erlaubt die Ausführung von Timing und Logging, und letzteres hat eine Liste von Regeln und macht Vorschläge, was zu tunen ist.