頁面渲染，通常來說分為前端渲染以及後端渲染。前端渲染指的是服務端返回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，有可能由於緩衝區的設置導致分段渲染無效，需要調整緩衝區大小。