Das Rendering von Seiten wird normalerweise in das Front-End-Rendering und das Back-End-Rendering unterteilt. Das Front-End-Rendering bezieht sich auf den Server, der das HTML-Framework und die Vorlage zurückgibt, und das Front-End zieht die Daten und rendert die Vorlage über Ajax Asynchronous Request und modifiziert die DOM dynamisch, um die endgültige Seite zu bilden. Das Server-Side-Rendering ist, wenn der Server Daten im Backend zieht und die vollständige Seite rendert und zum Client zurückkehrt. Die beiden Methoden haben ihre eigenen Vorteile. Das Back-End-Rendering bringt Vorteile wie das Erhöhen der ersten Bildlaufzeit, die Verringerung der Anzahl der Anfragen und das Nutzen der SEO. Traditionelles Backend Direct Rendering erfordert jedoch das Warten, bis die gesamte Webseite vor der Rückkehr zum Kunden wiedergegeben wird. Wenn ein Block die Daten langsam abzieht, was die Rendergeschwindigkeit beeinflusst, wird er für Benutzer auch länger beim Warten. Kann das Back-End-Rendering das gleiche wie das Front-End-Ajax-Rendering und das herkömmliche Server-Rendering in Blöcken und Regionen sein, wird unten eine Lösung bereitgestellt-Webseiten-Segment-Rendering.
Schauen wir uns zunächst die traditionelle Rendering -Methode an:
const http = required ("http"); const fs = required ("fs"); var tpl1 = '<! docType html> <html> <head> <title> test render </title> </head> <body> HelloWord <p> $ data1 </p>; html = ''; var server = http.createServer ((req, res) => {if (req.url! res.end (tpl1.replace (// $ data1/g, data1) + tpl2.replace (// $ data2/g, data2); }}); }}). Hören (3000, '127.0.0.1'); Funktion getDataone (fn) {setTimeout (() => { FN ('111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 FN ('222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222Oben geben wir ein einfaches Beispiel, um eine Seite zurückzugeben, indem wir http://127.0.0.1:3000 besuchen. Beim Rendern der Seite gibt es 2 Operationen, die 5 Sekunden dauern, von denen angenommen werden kann, dass sie IO oder Daten ziehen. Zu diesem Zeitpunkt beträgt die Zeit, in der wir die Rückkehrseite beobachten, 10 Sekunden, was bedeutet, dass der Benutzer 10 Sekunden dauert, bis die Seite angezeigt wird.
Als nächstes verwandeln wir die Backend -Rendering -Methode und ändern sie in segmentierte Rendering.
const http = required ("http"); const fs = required ("fs"); var server = http.createServer ((req, res) => {if (req.url! }); res.end ('<p> $ data2 </p> </body> </html>'. }); }); }); }); }); }); }). Hören (3000, '127.0.0.1'); Funktion getDataone (fn1) {setTimeout (() => { FN1 ('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 FN2 ('22222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222Durch Einstellen des HTTP-Headers: Transfer-Codierung: Chunked ist die Magie der segmentierten Getriebe aktiviert. Diese Codierungsmethode besteht in http1.1. Im Allgemeinen kann die Informationsgröße nicht ermittelt werden, wenn der Server HTTP -Antworten generiert. Zu diesem Zeitpunkt kann die Länge nicht im Voraus mit der Inhaltslänge geschrieben werden, und die Nachrichtenlänge muss in Echtzeit generiert werden. Der Server verwendet im Allgemeinen eine Chunked -Codierung.
Bei der Durchführung von Chunked-Codierungs-Getriebe befindet sich am Kopf der Antwortmeldung eine Übertragungskodierung und wird als chunkig definiert, was darauf hinweist, dass der Inhalt mithilfe von Chunked-Codierung übertragen wird. Schauen wir uns den modifizierten Effekt an:
Obwohl sich die Übertragungszeit der Gesamtseite nicht geändert hat, haben wir die Reaktionszeit um die Hälfte verkürzt und die Wartezeit des Benutzers verkürzt. In einem bestimmten Geschäft können wir sagen, dass die Teile, die Benutzer zuerst sehen müssen, im Voraus ausgeben, und der Backend-Prozess die langfristigen Teile des Backends to Output, was den Vorteil der segmentierten Übertragungswiedergabe darstellt. Beachten Sie, dass der Server, wenn es nginx ist, aufgrund von Puffereinstellungen möglicherweise ungültig ist und die Puffergröße angepasst werden muss.