Erstellen von DOM von PHP vs JS

Question

Zur Zeit habe ich keinen Ajax-Request in meiner Website und hier ist ein vereinfachtes mein Code:

class all_posts { 

    public function index($id){ 

     $statement = $db->prepare("SELECT * FROM mytable WHERE id = :id"); 
     $statement->execute(array(':id' => $id)); 
     $results = $statement->fetchAll(PDO::FETCH_ASSOC); 

     $arr = []; 
     $arr['html'] = '<ul>'; 

     // creating HTML 
     foreach($results as $result) { 
      $arr['html'] .= "<li class='clsname'>".$result['title']."</li> 
          <li style='color:gray;'>".$result['content']."</li>"; 
     } 

     $arr['html'] .= '</ul>'; 

     return $arr; 

    } 

} 

Ok alles in Ordnung. Jetzt möchte ich manchmal das Ergebnis durch Ajax-Anfrage erhalten. Nun, Was ist meine Frage?

ich wissen will, soll ich das Ergebnis mit entlang der HTML zurückgeben oder soll ich das reine Abfrage-Ergebnis zurück und dann den HTML von JS machen? Mit anderen Worten, welcher hat eine bessere Leistung?

# 1:

. 
. 
$arr['html'] .= '</ul>'; 

if(!empty($_SERVER["HTTP_X_REQUESTED_WITH"]) && 
    strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) === "xmlhttprequest") { 

    header('Content-Type: application/json'); 
    echo json_encode($arr); 
    exit(); 
} 

return $arr; 
. 
. 

# 2:

. 
. 
$results = $statement->fetchAll(PDO::FETCH_ASSOC); 

if(!empty($_SERVER["HTTP_X_REQUESTED_WITH"]) && 
    strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) === "xmlhttprequest") { 

    header('Content-Type: application/json'); 
    echo json_encode($results); 
    exit(); 
} 
. 
. 

Ich persönlich mag mit gehen # 1, weil in diesem Fall habe ich die HTML einmal machen, und ich Kann es später einfach ändern. Aber ich mache mir Sorgen wegen der Vorstellung, wird es nicht langsam sein?

Answer 1

Wir haben hier drei Leistungen: Server-Seite, Netzwerk-und Client-Seite.

Wenn Sie den HTML-Code serverseitig generieren und an den Browser senden, muss Ihr Server diese Ausgabe generieren, der Browser muss sie als Eingabe extrahieren und in das DOM schreiben. Dieser Ansatz macht die Server-Seite und die Netzwerk-Komponenten langsam, aber die Client-Seite wird schnell sein. Wenn Sie nur die Daten als eine Antwort an die Client-Seite senden, dann wird der Server weniger Arbeit haben, das Netzwerk muss eine viel kleinere Nachricht übertragen, aber die Client-Seite muss alle Details ausarbeiten. In diesem Fall werden Ihre Server- und Nachrichtenübertragung schneller, aber Ihre Client-Seite wird langsamer. Das Senden nur der Daten führt zu einer besseren Gesamtleistung.

Allerdings denke ich, Leistung ist nicht das Hauptproblem hier, es sei denn, Sie haben sehr große Teile der Ergebnisse. Es ist wichtiger, sicherzustellen, dass Sie den gleichen Code für die Erstladung und für die POST-Antwort verwenden, um die Wartbarkeit zu verbessern.

Answer 2

Erstens, warum ein Array erstellen, um Text (eine Zeichenfolge) zu halten, völlig nicht wert.

Wie auch immer, verwenden Sie besser json als die Transportmethode und js als die Möglichkeit, das HTML, das hinzugefügt wird, zu erstellen. Wenn PHP zum Erstellen von HTML verwendet wird, werden nur viel größere Datenpakete übertragen.

Verwenden Sie eine Art von Templating-Engine für JS ist am besten für diese, wie Lenker, Eckig oder was auch immer Sie Lust haben. Natürlich, wenn Sie nur einen AJAX-Aufruf mit einem Layout haben, dann ist es besser, Vanilla-JS-Dokumentfragmente zu erstellen und sie einzufügen.

Sie sollten wirklich nicht die vollständige SQL-Ausgabe an den Client senden, um bearbeitet zu werden, nur den Inhalt, der tatsächlich benötigt wird. d. h. Zeilen-ID wird nicht benötigt, erzeugte Zeit wird nicht benötigt, letzte Bearbeitung wird nicht benötigt usw.

Schließlich benötigen Sie eine Art Erfolgs-/Fehlerfeld auf Ihrem JSON, damit Sie es nach Bedarf verarbeiten können. Beispiel

$output = array('status'=> 'success', 'data' => $content); 
json_encode($output); 

Wenn also keine Daten von der SQL-Abfrage beantwortet werden, können Sie damit umgehen.