如何在Koa集成Bigpipe首屏渲染服務

NO IMAGE

本文章使用的代碼

一、服務端渲染

為什麼前後端分離的時代還需要服務端渲染?

就是為了快啊!還能做SEO啊!下面我們來簡單分析下這兩種方式的渲染過程

前後端分離頁面渲染模式:

1、瀏覽器發起頁面請求

2、解析html

3、發起請求獲取頁面對應的js、css

4、解析css、js

5、發起ajax請求獲取數據後將數據渲染到DOM中

服務端渲染:

1、瀏覽器發起請求

2、服務端發起請求獲取對應的頁面數據後將數據拼接到讀取的html中

3、返回拼接後的html給瀏覽器

4、瀏覽器解析html

5、獲取資源、解析資源

通過上面的對比,可以看出為什麼服務端渲染更快?因為前端通過ajax渲染,需要等到獲取js後,再發起http請求獲取到數據後才完成渲染,而服務端免去了多次http請求的過程(http請求耗時),直接讓服務端返回渲染好的html頁面。

那類似首屏這種對速度有要求的就可以使用服務端渲染了。

這裡提出一個問題,如果一個頁面,在服務端渲染中,數據源比較多的情況下,我們需要等待所有的請求都返回數據才進行html拼接並返回,這樣我們頁面最終渲染的速度就限制在最遲返回數據的請求上了。

那針對上述數據源較多的情況,還有優化的方案嗎?答案就是Bigpipe。

二、Bigpipe流式渲染

Bigpipe是一種採用流的方式對頁面進行渲染的機制,在瀏覽器請求頁面時,打開管道後持續對頁面的塊進行輸出。

如下圖,塊A、B、C拼裝好塊之後直接通過開始建立的管道輸出到頁面中,這樣頁面的最終輸出就不需要依賴最後一個塊的拼裝時間了。

如何在Koa集成Bigpipe首屏渲染服務

三、在Koa中以中間件的方式集成Bigpipe

下面來抽象一個簡單的bigpipe中間件。

以中間件的形式加載bigpipe服務,並指定模板與靜態資源的跟目錄

// app.js
app.use(createBigpipeMiddleware(
templatePath = resolve(__dirname, './template'),  // 模板文件夾
publicPath = resolve(__dirname, './view')  // 靜態資源目錄
));
使用bigpipe,我們一般需要讀取一個html-layout,接下來就是定義每一個塊的模板路徑和數據源,執行一個render方法後,開始返回html並持續輸出我們定義的塊。
// app.js
app.use((ctx) => {
let bigpipe = ctx.body = ctx.createBigpipe();
// 定義輸出的html layout
bigpipe.defineLayout('/bigpipe.html');
// 定義片段,這裡我們使用promise的方式模擬http請求
bigpipe.definePagelets([
{
id: 'A',
tpl: '/article.handlebars',    
getData: () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(a)
}, 3000)
})
}
},
{
id: 'B',
tpl: '/article.handlebars',
getData: () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(b)
}, 2000)
})
}
},
{
id: 'C',
tpl: '/article.handlebars',
getData: () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(c)
}, 0)
})
}
}
]);
bigpipe.render();
})

bigpipe.definePagelets傳入的對象數組中,每一個對象中的id為每一個塊對應需要插入的DOM節點的id屬性值,tpl為該模板在模板根目錄下的路徑,getData只是一個模擬http請求的函數,可以設定在x秒後返回輸出數據並進行拼接返回。html-layout如下。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test bigpipe</title>
<body>
<div id="A"></div>
<div id="B"></div>
<div id="C"></div>
<script>
// 渲染模板字符串到對應節點
var renderFlush = function (selector, html) {
var dom = document.querySelector(selector);
dom.innerHTML = html
};
</script>

下面的createBigpipeMiddleware中間件的實現

const { resolve } = require('path')
const Bigpipe = require('./lib/bigpipe')
module.exports = createBigPipeReadable
function createBigPipeReadable (
templatePath = resolve(__dirname, '../../template'),  // 模板根目錄(默認)
publicPath = resolve(__dirname, '../../../../public') // html根目錄(默認)
) {
// 返回一個帶有ctx與next參數的async函數
return async function initBigPipe(ctx, next) {
if (ctx.createBigpipe) return next()
// 在上下文中掛載createBigpipe方法供我們在業務中使用
ctx.createBigpipe = function () {
ctx.type = 'html';
return new Bigpipe({
appContext: ctx,
templatePath: templatePath,
publicPath: publicPath
})
}
return next()
}
}

上面是koa中間件的寫法,不太理解的可以google查一查。這個中間件會在ctx中掛載方法createBigpipe用於初始化bigpipe服務,那在後續的業務文件中就可以直接通過調用ctx.createBigpipe來調用bigpipe服務了

下面就是具體bigpipe對象的類實現了。

首先,我們先讓Bigpipe對象繼承Readable(因為Koa不支持直接調用底層res進行響應處理)

const Readable = require('stream').Readable;
class Bigpipe extends Readable {
constructor(props) {
super(props);
this.appContext = props.appContext;  // koa上下文
this.templatePath = props.templatePath; 
this.publicPath = props.publicPath;
this.layout = '';  // html-layout
this.pagelets = [];  // 用於存放塊
this.pageletsNum = 0;
}
_read() {}
...
}

接下來實現一個defineLayout函數,把layout轉成字符串(也就是上文貼出來的html)

const { join } = require('path');
class Bigpipe extends Readable {
...
defineLayout(realPath) {
let layoutPath = join(this.publicPath, realPath)
this.layout = fs.readFileSync(layoutPath).toString();
}
...
}

下面的definePagelets用於傳入塊的配置,可傳入一個對象多次調用或者直接傳入一個數組

class Bigpipe extends Readable {
...
definePagelets(pagelets) {
if (Array.isArray(pagelets)) {
this.pagelets = this.pagelets.concat(pagelets);
} else {
if (typeof pagelets === 'object') {
this.pagelets.push(pagelets)
}
}
this.pageletsNum = this.pagelets.length;
}
...
}

接下來是就是render函數了,調用後直接開始輸出layout還有對塊進行拼接傳輸

class Bigpipe extends Readable {
...
// 配置好後渲染主邏輯
async render() {
// 首先輸出html骨架
this.push(this.layout);
// 所有塊完成後,關閉流
await Promise.all(this.wrap(this.pagelets))
// 結束傳輸
this.done();
}
...
}

上面,因為Bigpipe繼承了Readable,所以可以用push的方式推入數據,接著await後則是一個Promise.all方法,等到所有的塊輸出完成後,才執行done方法閉合html結束數據傳輸。

下面是最重要的方法,wrap方法,用於將傳入的塊數組包裝成promise(這裡我們使用handlebars作為模板引擎,當然還有很多其他選擇)

const Handlebars = require('handlebars');
class Bigpipe extends Readable {
...
//將proxy,包裝成Promise
wrap(pagelets) {
return pagelets.map((pagelet, idx) => {
// 返回一個promise,模板拼接好輸出到頁面中即resolve
return new Promise((resolve, reject) => {
(async () => {
let data = null,
tpl = function() {},
tplHtml = '';
// 調用個個塊的getData方法,等待數據獲取
data = await pagelet.getData()
// 獲取hbs模板
tpl = this.getHtmlTemplate(pagelet.tpl);
// 將數據拼接好後返回模板字符串,並清除換行符
tplHtml = this.clearEnter(tpl(data));
// 以script輸出到頁面中
this.push(`
<script>
renderFlush("#${pagelet.id}","${tplHtml}")
</script>
`)
this.pageletsNum--;
resolve()
})()
})
})
}
// 獲取骨架並轉成字符串
getHtmlTemplate(realPath) {
let tplPath = join(this.templatePath, realPath);
let tplSource = fs.readFileSync(tplPath).toString();
// 編譯模板
return Handlebars.compile(tplSource);
}
// 清除模板字符串的換行符
clearEnter(html) {
return html.replace(/[\r\n]/g,"")
}
...
}

每一個promise中,在data返回後,都會調用this.push方法推入一串腳本,執行的就是如下的在html-layout中的函數,傳入的是id屬性值與拼接好的html塊,執行renderFlush就會將塊輸出到html中。

var renderFlush = function (selector, html) {
var dom = document.querySelector(selector);
dom.innerHTML = html  
};

上面我們傳入了getData方法,相應的你也可以使用request等模塊去封裝一個函數去獲取對應數據,這裡只是作為演示,直接使用一個promise返回數據。

執行node app.js後,訪問localhost:9000,結果如下

1、先輸出html與塊C

2、2秒後,輸出塊B

3、3秒後,輸出完畢,管道關閉(注意,瀏覽器刷新按鈕從叉變成了箭頭)

如何在Koa集成Bigpipe首屏渲染服務

四、總結

bigpipe渲染確實更快,具體是否需要還是得看業務場景,比如像facebook和新浪等就用了這種方式渲染頁面,可惜的是沒有開源出來。有錯誤歡迎大家指正啊。輕噴、輕噴就好。

相關文章

如何在webpack中做預渲染降低首屏空白時間

HybirdApp模式下,js如何與客戶端交互

RxJS實踐,Vue如何集成RxJS

React使用新版Context構建組件樹工具注入