快捷導(dǎo)航

node網(wǎng)頁分段渲染詳解

更新時間：2016年09月05日 09:09:31 作者：jaychen

按照常理，我們渲染一張網(wǎng)頁，必定是網(wǎng)頁全部拼裝完畢，然后生成HTML字符串，傳送至客戶端。這也意味著，如果一張網(wǎng)頁處理的有快有慢的話，必須串行等到所有的邏輯都處理完畢。后端才能進行返回。

頁面渲染，通常來說分為前端渲染以及后端渲染。前端渲染指的是服務(wù)端返回html框架以及模版，前端通過ajax異步請求拉取數(shù)據(jù)渲染模版，并動態(tài)修改dom，形成最終頁面。服務(wù)端渲染則是服務(wù)端通過在后端拉取數(shù)據(jù)以及后端模版渲完整頁面，并返回到客戶端。2種方法各有好處，后端渲染帶來的則是首屏?xí)r間的提高，減少請求次數(shù)，利于SEO等好處。但是傳統(tǒng)后端直出渲染需要等到整個網(wǎng)頁渲染完成，才能返回到客戶端。假如某個區(qū)塊拉取數(shù)據(jù)比較慢，影響了渲染的速度，那對于用戶來說，等待的時候也會跟著變長對于后端渲染能否跟前端ajax渲染一樣，分塊分區(qū)域傳統(tǒng)的服務(wù)端直出渲染，下面將提供一種解決方案-網(wǎng)頁分段渲染。

首先我們先看下傳統(tǒng)的渲染方式：

const http = require("http");
const fs = require("fs");
var tpl1 = '<!DOCTYPE html><html><head><title>測試render</title></head><body>helloword<p>$data1</p>';
var tpl2 = '<p>$data2</p></body></html>';
var 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));
     })
   });
 }
 }).listen(3000, '127.0.0.1');


function getDataOne(fn){
  setTimeout(() => {
     fn('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
  }, 5000);
 }

 function getDataTwo(fn){
   setTimeout(() => {
     fn('22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222');
   }, 5000);
 }

上面我們提供了一個簡單的例子，通過訪問http://127.0.0.1:3000 返回一個頁面。其中渲染頁面時，有2個耗時5秒的操作，可以假設(shè)為IO或者數(shù)據(jù)拉取。這個時候我們觀察返回頁面的時間是10秒，也就是說用戶看到頁面需要10秒鐘。

下面我們通過改造后端渲染方式，改為分段渲染。

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'
    });

    getDataOne((data1) => {
      res.write('<!DOCTYPE html><html><head><title>測試render</title></head><body>helloword<p>$data1</p>'.replace(/\$data1/g, data1));
      getDataTwo((data2) => {
        res.end('<p>$data2</p></body></html>'.replace(/\$data2/g, data2));
      })
    });
 ｝
}).listen(3000, '127.0.0.1');

function getDataOne(fn1){
  setTimeout(() => {
   fn1('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
 }, 5000);
 }

function getDataTwo(fn2){
  setTimeout(() => {
    fn2('22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222');
  }, 5000);
}

通過設(shè)置http首部: Transfer-Encoding: chunked 即開啟了分段傳輸?shù)哪Х?。該編碼方式存在http1.1中，一般在服務(wù)器生成HTTP回應(yīng)是無法確定信息大小的，這時用Content-Length就無法事先寫入長度，而需要實時生成消息長度，則服務(wù)器一般采用Chunked編碼。

在進行Chunked編碼傳輸時，在回復(fù)消息的頭部有transfer-coding并定義為Chunked，表示將用Chunked編碼傳輸內(nèi)容。下面我們看下修改后的效果：

雖然總體的頁面?zhèn)鬏敃r間并沒有變化，但是通過該方式，我們將響應(yīng)時間縮短了一半，減少了用戶等待的時間。在具體業(yè)務(wù)中，我們可以講用戶需要先看到的部分進行提前輸出，將后端處理耗時較久的部分延遲輸出，這就是分段傳輸渲染的優(yōu)勢。注意如果服務(wù)器是nginx，有可能由于緩沖區(qū)的設(shè)置導(dǎo)致分段渲染無效，需要調(diào)整緩沖區(qū)大小。

您可能感興趣的文章: