A renderização de páginas geralmente é dividida em renderização de front-end e renderização de back-end. A renderização do front-end refere-se ao servidor que retorna a estrutura e modelo HTML, e o front-end puxa os dados e renderiza o modelo através da solicitação assíncrona do Ajax e modifica dinamicamente o DOM para formar a página final. A renderização do lado do servidor é quando o servidor puxa dados no back-end e renderiza a página completa e retorna ao cliente. Os dois métodos têm seus próprios benefícios. A renderização de back-end traz benefícios, como aumentar o tempo de tela da primeira tela, reduzir o número de solicitações e beneficiar o SEO. No entanto, a renderização direta tradicional de back -end exige a espera até que toda a página da web seja renderizada antes de retornar ao cliente. Se um bloco puxar os dados lentamente, o que afeta a velocidade de renderização, para os usuários, ele também ficará mais longo enquanto espera. A renderização de back-end pode ser a mesma que a renderização do Ajax front-end e a renderização tradicional do lado do servidor em blocos e regiões, uma solução será fornecida abaixo-renderização do segmento de página da web.
Primeiro, vamos dar uma olhada no método de renderização tradicional:
const http = requer ("http"); const fs = requer ("fs"); var tpl1 = '<! Doctype html> <html> <head> <title> renderize </title> </head> <body> helloword <p> data1 </p>'; var tpL2 = p. 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.Plina (// $ Data1/G, Data1) + TPL2.replace (// $ Data2/G, Data2)); }}); }}). Ouça (3000, '127.0.0.1'); função getDataone (fn) {setTimeout (() => { fn ('111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 FN ('2222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222Acima, fornecemos um exemplo simples para retornar uma página visitando http://127.0.0.1:3000. Ao renderizar a página, existem 2 operações que levam 5 segundos, o que pode ser assumido como IO ou tração de dados. Neste momento, o momento em que observamos que a página de retorno é de 10 segundos, o que significa que leva 10 segundos para o usuário ver a página.
Em seguida, transformamos o método de renderização de back -end e o alteramos para a renderização segmentada.
const http = requer ("http"); const fs = requer ("fs"); var server = http.createServer ((req, res) => {if (req.url! == "/favicon.ico") {res.writehead (200, '{' content-type ':' text/') }); Res.nd ('<p> $ data2 </p> </coder> </html>'. Substitua (// $ data2/g, data2)); }); }); }); }); }); }); }). Ouça (3000, '127.0.0.1'); função getDataone (fn1) {setTimeout (() => { FN1 ('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 FN2 ('222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222 222222222222222222222222222222222222222222222222222222222222222222222222222222Definindo o cabeçalho HTTP: codificação de transferência: RECUTADO, a magia da transmissão segmentada está ativada. Esse método de codificação existe em http1.1. Geralmente, o tamanho da informação não pode ser determinado quando o servidor gera respostas HTTP. No momento, o comprimento não pode ser escrito com antecedência com o comprimento do conteúdo e o comprimento da mensagem precisa ser gerado em tempo real. O servidor geralmente usa a codificação em chunked.
Ao executar a transmissão de codificação em pedaços, há codificação de transferência na cabeça da mensagem de resposta e é definida como criticada, indicando que o conteúdo será transmitido usando a codificação de pedaços. Vamos dar uma olhada no efeito modificado:
Embora o tempo geral de transferência de página não tenha mudado, dessa maneira, reduzimos o tempo de resposta pela metade, reduzindo o tempo de espera do usuário. Em negócios específicos, podemos dizer que as peças que os usuários precisam ver primeiro são emitidas com antecedência e o processo de back-end as partes de longo prazo do back-end para a saída, que é a vantagem da renderização de transmissão segmentada. Observe que, se o servidor for Nginx, é possível que a renderização segmentada possa ser inválida devido a configurações de buffer e o tamanho do buffer precisará ser ajustado.