Der erste Ajax-Aufruf geht extrem langsam, nachfolgende Aufrufe laufen schnell - warum?

Betrachtet man das ganze Problem, könnte Javascript (Client-Seite) + API (Server-Seite) die Diagnose des Problems erschweren, so dass mein Vorschlag, eine spezifischere Antwort zu erhalten, darin besteht, das Problem zuerst zu isolieren.

Beantwortung Ihrer allgemeinen Frage, Gründe warum?: Es könnte eine Menge Dinge sein, aber die bemerkenswerten sind:

1. Handshake: Die erste Interaktion zwischen Ihrer Seite und dem Server veranlasst den Remote-Server, Sie zu authentifizieren und Ihre Sitzung zu validieren. Spätere Aufrufe werden diesen Prozess nicht durchlaufen.
2. Erste Serverausführung: (weniger wahrscheinlich, wenn Sie öffentliche APIs verwenden) Wenn Sie beispielsweise einen Remote-Server mit Java verwenden, den Sie neu starten, werden beim ersten Aufruf eines Dienstes die Instanzen geladen , aber für zukünftige Anrufe sind diese Instanzen bereits erstellt, daher reagieren sie schneller.
3. Netzwerk: (Ich glaube nicht ... aber ...) verfolgen Sie Ihre HTTP-Anfrage, um zu sehen, wie viele Sprünge sie haben und wie viel sie benötigen, um sie zu lösen.

Diagnostizieren (Isolation): Messen Sie die Zeit, die jeder Schritt benötigt, es könnte ein einfacher Ausdruck Ihrer aktuellen Zeit sein. Ich würde es in den folgenden Schritten brechen:

1. Vorbereiten des Aufrufs für die API.
2. Aufruf der API.
3. Abrufen der Daten.
4. Manipulieren Sie die empfangenen Daten auf der Client-Seite.

HINWEIS: Die Schritte 2 und 3 könnten zusammengehen.

Wie kann dies verhindert werden? (Es löst das Problem nicht, sondern mildert es):

1. Handshake: Wenn das Problem mit der Authentifizierung / Autorisierung zusammenhängt, empfehle ich Ihnen, ein leeres Pre-Fetch (ohne Anforderung von Daten) zu machen, um mit dem Handshake umzugehen. Dann führen Sie einen Datenabruf durch, wenn Sie ihn ohne diesen Overhead benötigen.
2. Erste Ausführung des Servers: Sie haben hier nicht zu viel zu tun, es sei denn, Sie besitzen auch den Server. In diesem Fall empfehle ich auch ein Pre-Fetch, aber den gesamten Service aufzurufen, um die Serverobjekte zu initialisieren.
3. Javascript API: Wenn das Problem mit den Daten auf Ihrer Client-Seite zu tun hat, dann überprüfen Sie, wie Sie Ihren Javascript-Code optimieren können.

Das könnte ein langer Schuss sein. "appendToWrapper" ist ein Objekt, das als Referenz übergeben wird. Wenn es eine lange Zeit dauert, das Problem zu lösen (dh es dauert etwa 10 Sekunden, um ".game_play_area" usw. im DOM zu finden), wäre es beim ersten Mal langsam, aber in der aufrufenden Funktion und in den schnellen Folgezeiten gespeichert.

Es könnte leicht zu überprüfen sein. Wenn Sie eine tiefe Kopie des Objekts erstellen könnten, bevor Sie es übergeben, würden wir erwarten, dass der AJAX jedes Mal langsam ist, nicht nur beim ersten Mal. Wenn dies der Fall ist, müssten Sie Ihre Selektoren bereinigen, um sie schneller zu machen. Vielleicht verwenden Sie IDs anstelle von Klassen.