Le rendu de la page est généralement divisé en rendu frontal et rendu arrière. Le rendu frontal fait référence au serveur renvoyant le framework HTML et le modèle, et le frontal tire les données et rend le modèle via une demande asynchrone Ajax, et modifie dynamiquement le DOM pour former la page finale. Le rendu côté serveur est lorsque le serveur tire les données sur le backend et rend la page complète et revient au client. Les deux méthodes ont leurs propres avantages. Le rendu arrière apporte des avantages tels que l'augmentation du temps du premier écran, la réduction du nombre de demandes et le bénéfice du référencement. Cependant, le rendu direct du backend traditionnel nécessite d'attendre que la page Web entière soit rendue avant de retourner au client. Si un bloc tire lentement les données, ce qui affecte la vitesse de rendu, alors pour les utilisateurs, il deviendra également plus long en attendant. Le rendu arrière peut être le même que le rendu de l'AJAX frontal et le rendu traditionnel côté serveur dans les blocs et les régions, une solution sera fournie ci-dessous - rendu du segment de page Web.
Tout d'abord, jetons un coup d'œil à la méthode de rendu traditionnelle:
const http = require ("http"); const fs = require ("fs"); var tpl1 = '<! doctype html> <html> <p> <tight> Test Render </ title> </ head> <body> helloword <p> $ data1 </p>'; var tpl2 = '<p> $ data2 </p> html = ''; var server = http.createServer ((req, res) => {if (req.url! == "/ favicon.ico") {res.writehead (200, {'contenu-type': 'text / html'}); getDataOne ((data1) => {getDattwo ((data2) = {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{ot res.end (tpl1.replace (// $ data1 / g, data1) + tpl2.replace (// $ data2 / g, data2));})}); }}); }}). écouter (3000, '127.0.0.1'); fonction getDataOne (fn) {setTimeout (() => { FN ('111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 FN ('22222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222Ci-dessus, nous fournissons un exemple simple pour retourner une page en visitant http://127.0.0.1:3000. Lorsque vous rendez la page, il y a 2 opérations qui prennent 5 secondes, ce qui peut être supposé être une IO ou une traction de données. À l'heure actuelle, le moment où nous observons la page de retour est de 10 secondes, ce qui signifie qu'il faut 10 secondes pour que l'utilisateur puisse voir la page.
Ensuite, nous transformons la méthode de rendu backend et la modifions en rendu segmenté.
const http = requis ("http"); const fs = require ("fs"); var server = http.createServer ((req, res) => {if (req.url! == "/ favicon.ico") {res.writehead (200, {'contenu': 'text / html' ',' 'transfert-cocoder': ' }); res.end ('<p> $ data2 </p> </ body> </ html>'. Remplace (// $ data2 / g, data2);})}); }); }); }); }); }); }); }). écouter (3000, '127.0.0.1'); fonction getDataOne (fn1) {setTimeout (() => { FN1 ('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 FN2 ('2222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222En définissant l'en-tête HTTP: Encodage de transfert: Chunked, la magie de la transmission segmentée est activée. Cette méthode d'encodage existe dans HTTP1.1. Généralement, la taille des informations ne peut pas être déterminée lorsque le serveur génère des réponses HTTP. Pour le moment, la longueur ne peut pas être écrite à l'avance avec la longueur du contenu, et la longueur du message doit être générée en temps réel. Le serveur utilise généralement un codage en morceaux.
Lorsque vous effectuez une transmission de codage en morceaux, il y a du codage de transfert à la tête du message de réponse et est défini comme un morceau, indiquant que le contenu sera transmis à l'aide de codage en morceaux. Jetons un coup d'œil à l'effet modifié:
Bien que le temps de transfert de page global n'ait pas changé, de cette manière, nous avons réduit le temps de réponse de moitié, réduisant le temps d'attente de l'utilisateur. Dans des activités spécifiques, nous pouvons dire que les pièces que les utilisateurs ont besoin de voir en premier sont des résultats à l'avance et que le backend traite les parties à long terme du backend à la sortie, ce qui est l'avantage du rendu de transmission segmenté. Notez que si le serveur est nginx, il est possible que le rendu segmenté soit invalide en raison des paramètres de tampon et la taille du tampon doit être ajustée.