頁面渲染，通常來說分為前端渲染以及後端渲染。前端渲染指的是服務端返回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，有可能由於緩衝區的設定導致分段渲染無效，需要調整緩衝區大小。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
