Helfen JSON-Vorlagen beim Laden von Inhalten über AJAX und bei einer besseren Leistung?[geschlossen]

Question

Geschlossen.Diese Frage ist meinungsbasiert.Es akzeptiert derzeit keine Antworten.

---

Möchten Sie diese Frage verbessern? Aktualisieren Sie die Frage, damit sie mit Fakten und Zitaten beantwortet werden kann, indem Sie diesen Beitrag bearbeiten.

Geschlossen vor 6 Jahren.

Wir arbeiten an einem dynamischen Dashboard, das dem Einstellungsfenster von Twitter unter unserem Twitter sehr ähnlich ist account.As das Dashboard verfügt über viele Steuerelemente, es sind viele Inhalte ausgefüllt dynamically.So derzeit machen wir das so.

Dies ist eines der Menüs in meinem linken Bereich:

<a href="javascript:void(0);" onclick="fnGetFiles();">Files</a>     

Dies ist die aufgerufene Funktion, die den HTML-Code abruft:

function fnGetFiles(){
  $('#mainDashboard').html('<div class="rightContainer"><div class="tabLoader"></div></div><div class="clear"></div>');
  $.get(USER_DASHBOARD+'file_share/files.php',function(data){
  $('#mainDashboard').html(data);
});

Also hängen wir grundsätzlich direkt den HTML-Code an.Aber ich bin gerade durch das Twitter-Dashboard gegangen
Erstens ist die URL-Handhabung, die sie für die Navigation zwischen den verschiedenen Menüs auf der linken Seite durchführen (Bild als Referenz hinzugefügt).Es ändert sich einfach im laufenden Betrieb und der Inhalt wird geladen.Auf inspizieren der Code, den ich bemerkt habe, sendet HTML als JSON-Zeichenfolgen.
Ich bin mir nicht ganz sicher, aber tut das verbessern Sie die Leistung in irgendeiner Weise?Meins ist ein bisschen schlecht in der Produktion und würde gerne genau wissen, mit welchen Frameworks ich etwas Ähnliches erreichen kann (Außerdem habe ich mit AJAX-Konflikten zwischen Skripten zu kämpfen).Ich benutze PHP und jquery für meine Bewerbung.
Ich habe versucht, Informationen von zu bekommen dev.twitter.com,und Blog konnte aber keine spezifischen Informationen dazu finden.
Bitte versuchen Sie, wenn möglich, mich zu führen und etwas Licht darauf zu werfen.
Danke für Ihre Zeit.

Answer 1

Ihr HTML, JavaScript, Bilder und andere clientseitige Elemente sind alle statisch.Sie sollten so bleiben.Sie müssen keine Elemente dynamisch in JavaScript erstellen.

Ihre AJAX-Anrufe müssen nur losgehen, erhalten die Daten, die zum Auffüllen Ihres HTML-Codes erforderlich sind, und fügen Sie diese Daten dem DOM hinzu.JSON / XML ist wie ein Protokoll:

Kommunikationsprotokolle müssen von den beteiligten Parteien vereinbart werden.

Für Ihr JS> PHP> JS ist JSON ein großartiges 'Protokoll' (vereinbarte Kommunikationsmethode), da es einen Standard setzt und Sie lediglich verwenden json_encode() / json_decode() in Ihrem PHP und $.parseJSON() wenn Sie jQuery verwenden.Die Verwendung von JSON ist nur ein vereinbartes Nachrichtenformat, das Sie als Entwickler wirklich verwenden sollten, da es ein Standard ist.

Sie möchten keine zusätzlichen Daten über die Leitung senden, die Sie nicht benötigen.Senden Sie kein HTML, es sei denn, Sie müssen.Fordern Sie an und antworten Sie nur mit den Daten, die Sie benötigen.

Ohne hier zu viel zu schimpfen, gibt es viele großartige Tools, die Ihnen dabei helfen, solche Dinge zu tun.Mit AngularJS können Sie beispielsweise das DOM automatisch mit JSON aktualisieren, das vom Server zurückgegeben wird, indem Sie Anweisungen wie verwenden ng-repeat.Im Grunde bedeutet dies, dass Sie kein benutzerdefiniertes JavaScript schreiben müssen, um DOM-Elemente mit Daten zu füllen, die vom Server abgerufen wurden (sowohl von Ihrem Dashboard als auch von Ihrem mein dashboard derzeit tun).

Außerdem verwende ich Websockets, weil das Abfeuern einer Menge AJAX-Anfragen für Echtzeitdaten nicht das ist, wofür diese AJAX-Anfragen gemacht werden.Wenn Sie nur alle 5 - 10 Sekunden Daten benötigen, gut, aber öfter als das und Sie möchten eine bidirektionale Technologie wie Websockets, für die Sie React PHP und so etwas wie Ratchet lernen müssen (wenn Sie es jedoch zum Laufen bringen) Es ist großartig).

Vereinbaren Sie zunächst ein 'Protokoll', das sowohl Ihre clientseitige als auch Ihre serverseitige Seite verwenden werden.Senden und empfangen Sie dann nur Daten, die Sie brauchen, und das, was Anpassungen.Alles andere ist statisch und würde nur Bandbreite verschwenden.Geben Sie kein HTML weiter.Schließlich, in Bezug auf die Geschwindigkeit, Senden von JSON vs.senden von Klartext - Dies hängt buchstäblich von der Länge der Zeichen ab, die Sie senden.Das war's.Unabhängig davon sind diese Gewinne in beiden Fällen so unbedeutend, dass Sie sich keine Sorgen darüber machen müssen, es sei denn, Sie senden HTML, was Sie nicht sind.Bist du.