La representación de la página generalmente se divide en la representación frontal y la representación de fondo. La representación frontal se refiere al servidor que devuelve el marco y la plantilla HTML, y el front-end extrae los datos y hace la plantilla a través de la solicitud asíncrona de Ajax, y modifica dinámicamente el DOM para formar la página final. La representación del lado del servidor es cuando el servidor extrae datos en el backend y representa la página completa y regresa al cliente. Los dos métodos tienen sus propios beneficios. La representación de fondo trae beneficios como aumentar el tiempo de primera pantalla, reducir el número de solicitudes y beneficiar al SEO. Sin embargo, la representación directa de backend tradicional requiere esperar hasta que toda la página web se represente antes de regresar al cliente. Si un bloque extrae los datos lentamente, lo que afecta la velocidad de representación, entonces para los usuarios, también será más largo mientras espera. La representación de back-end puede ser la misma que la representación AJAX frontal y la representación tradicional del lado del servidor en bloques y regiones, se proporcionará una solución a continuación: la representación del segmento de la página web.
Primero, echemos un vistazo al método de renderizado tradicional:
const http = require ("http"); const fs = require ("fs"); var tpl1 = '<! DocType html> <html> <fead> <bitle> test render </title> </sead> <body> helloword <p> $ data1 </p>'; var tpl2 = '<p> $ data </p> </body> </html; html = ''; var server = http.createServer ((req, res) => {if (req.url! == "/favicon.ico") {res.writehead (200, {'content-type': 'text/html'}); getDataOne ((data1) => {getDatatwo ((data2) res.end (tpl1.replace (// $ data1/g, data1) + tpl2.replace (// $ data2/g, data2)); }}); }}). Escuchar (3000, '127.0.0.1'); function getDataOne (fn) {setTimeOut (() => { fn ('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. FN ('2222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222Arriba proporcionamos un ejemplo simple para devolver una página visitando http://127.0.0.1:3000. Al representar la página, hay 2 operaciones que toman 5 segundos, lo que se puede suponer que son IO o extracción de datos. En este momento, el momento en que observamos la página de retorno es de 10 segundos, lo que significa que el usuario tarda 10 segundos en ver la página.
A continuación, transformamos el método de representación de backend y lo cambiamos a renderizado segmentado.
const http = require("http");const fs = require("fs");var server = http.createServer((req, res)=>{ if(req.url!=="/favicon.ico"){ res.writeHead(200, { 'Content-Type' : 'text/html', 'Transfer-Encoding' : 'chunked' }); res.end ('<p> $ data2 </p> </body> </html>'. Reemplazar (// $ data2/g, data2)); }); }); }); }); }); }); }). Escuchar (3000, '127.0.0.1'); function getDataOne (fn1) {setTimeOut (() => { FN1 ('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111. FN2 ('22222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222Al establecer el encabezado HTTP: Ecodificación de transferencia: Tritado, la magia de la transmisión segmentada está habilitada. Este método de codificación existe en http1.1. En general, el tamaño de la información no se puede determinar cuando el servidor genera respuestas HTTP. En este momento, la longitud no se puede escribir de antemano con el contenido, y la longitud del mensaje debe generarse en tiempo real. El servidor generalmente usa codificación fortuada.
Al realizar la transmisión de codificación de fragmentación, hay codificación de transferencia en la cabeza del mensaje de respuesta y se define como fragmentado, lo que indica que el contenido se transmitirá utilizando la codificación fortada. Echemos un vistazo al efecto modificado:
Aunque el tiempo general de transferencia de la página no ha cambiado, de esta manera, hemos reducido el tiempo de respuesta a la mitad, reduciendo el tiempo de espera del usuario. En negocios específicos, podemos decir que las piezas que los usuarios necesitan ver primero se producen por adelantado, y el proceso de back-end las partes a largo plazo del backend a la salida, que es la ventaja de la representación de transmisión segmentada. Tenga en cuenta que si el servidor es NGINX, es posible que la representación segmentada no sea válida debido a la configuración del búfer, y el tamaño del búfer debe ajustarse.