頁面渲染，通常來說分為前端渲染以及后端渲染。前端渲染指的是服務端返回html框架以及模版，前端通過ajax異步請求拉取數據渲染模版，并動態修改dom，形成最終頁面。服務端渲染則是服務端通過在后端拉取數據以及后端模版渲完整頁面，并返回到客戶端。2種方法各有好處，后端渲染帶來的則是首屏時間的提高，減少請求次數，利于SEO等好處。但是傳統后端直出渲染需要等到整個網頁渲染完成，才能返回到客戶端。假如某個區塊拉取數據比較慢，影響了渲染的速度，那對于用戶來說，等待的時候也會跟著變長對于后端渲染能否跟前端ajax渲染一樣，分塊分區域傳統的服務端直出渲染，下面將提供一種解決方案-網頁分段渲染。
首先我們先看下傳統的渲染方式：
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秒的操作，可以假設為IO或者數據拉取。這個時候我們觀察返回頁面的時間是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);}通過設置http首部: Transfer-Encoding: chunked 即開啟了分段傳輸的魔法。該編碼方式存在http1.1中，一般在服務器生成HTTP回應是無法確定信息大小的，這時用Content-Length就無法事先寫入長度，而需要實時生成消息長度，則服務器一般采用Chunked編碼。
在進行Chunked編碼傳輸時，在回復消息的頭部有transfer-coding并定義為Chunked，表示將用Chunked編碼傳輸內容。 下面我們看下修改后的效果：
雖然總體的頁面傳輸時間并沒有變化，但是通過該方式，我們將響應時間縮短了一半，減少了用戶等待的時間。在具體業務中，我們可以講用戶需要先看到的部分進行提前輸出，將后端處理耗時較久的部分延遲輸出，這就是分段傳輸渲染的優勢。 注意如果服務器是nginx，有可能由于緩沖區的設置導致分段渲染無效，需要調整緩沖區大小。
新聞熱點
疑難解答
