利用bigpipe機制實現頁面模組的非同步渲染

2022-03-15 05:27:35 字數 914 閱讀 8342

終於要在專案中用bigpipe了,在模組較多的頁面中,bigpipe的優化的效果還是不錯的。

下面說說bigpipe的實現原理:

bigpipe基於http/1.1 支援的chunked編碼,可以由瀏覽器接收到伺服器傳送的chunked塊後,立即解析該塊**。因為chunked編碼使訊息主體成塊傳送,每塊有自己的大小指示器,在所有的塊之後會緊接著乙個可選的包含實體頭域的尾部。這種編碼充許傳送端能動態生成內容,並能攜帶能讓接收端判斷訊息是否接收完整的有用資訊。

每塊的大小指示器chunk-size為16進製制數字字串,塊編碼以大小為0的塊結束,緊接著是trailer(尾部),trailer以乙個空行終止。

如下圖:

圖中藍框區域所示該http響應為chunked編碼

圖種紅框部分為每乙個chunked塊,其中比如第乙個塊的14a就是這個塊的大小指示器chunk-size,緊接著的就是塊的內容。在最後乙個內容塊後面會增加乙個大小為0的塊,以標誌所有塊結束,所以真實的塊數量會比可見的內容塊數量多乙個。

點選以下位址可以檢視該例項,可以明顯地看到每一行的延遲輸出。

《源**》

大家可以看到,在php中,是通過flush()語句來將緩衝區裡的資料實時傳送到請求端,實現起來並不複雜。

ok,那麼我們如何來通過chunked編碼塊的這個特性來實現頁面元素的非同步渲染呢?是由伺服器端輸出分塊的內容,其實就是一段標籤內容,標籤新增到頁面後,會由標籤內的js**來作頁面模組渲染的控制,請看以下示例:

《源**》

通過該示例大家可以大致了解bigpipe機制的基本過程,而且還可以通過自己寫框架來包裝,使該機制更加完善。不過本文就起個簡單的原理介紹的作用,大家了解了實現方式後可以自己玩就行了。。嘿嘿。。

基於Nodejs的BigPipe實現

簡介 bigpipe是facebook推出的用於優化網頁載入速度的技術,它突破了傳統網頁的載入方式,通過把網頁內容進行分塊,然後對這些塊進行並行傳輸從,使得瀏覽器的渲染無需等到整個頁面載入完畢,大大提公升網頁呈現速度。天貓上首頁就有這種實現。bigpie適用於網頁分塊清晰,且規模達到一定程度。使用b...

vue頁面利用keep alive實現頁面快速快取

需求 vue切換頁面時,保留原頁面表單資料,實現快速快取,便於下次利用 方法 基於vue的內建元件keep alive 文件 官方說明 包裹動態元件時,會快取不活動的元件例項,而不是銷毀它們。和 相似,是乙個抽象元件 它自身不會渲染乙個 dom 元素,也不會出現在父元件鏈中。當元件在 內被切換,它的...

php利用ob快取機制實現頁面靜態化方法全解

首先介紹一下php 中ob快取常用到的幾個常用函式 ob start 開啟快取機制 ob get contents 獲取ob快取中的內容 ob clean 清除ob快取中的內容,但不關閉快取 ob end clean 清除ob快取中的內容,並關閉快取 ob flush 清空快取,輸出內容,但不關閉快...