利用bigpipe机制实现页面模块的异步渲染 chunked技术
?bigpipe基于HTTP/1.1 支持的chunked編碼，可以由瀏覽器接收到服務器發送的chunked塊后，立即解析該塊代碼。因為chunked編碼使消息主體成塊發送，每塊有自己的大小指示器，在所有的塊之后會緊接著一個可選的包含實體頭域的尾部。這種編碼充許發送端能動態生成內容，并能攜帶能讓接收端判斷消息是否接收完整的有用信息。
?? ?每塊的大小指示器chunk-size為16進制數字字符串，塊編碼以大小為0的塊結束，緊接著是trailer(尾部)，trailer以一個空行終止。
?? ?如下圖：
圖中藍框區域所示該http響應為chunked編碼
?? ?圖種紅框部分為每一個chunked塊，其中比如第一個塊的14a就是這個塊的大小指示器chunk-size，緊接著的就是塊的內容。在最后一個內容塊后面會增加一個大小為0的塊，以標志所有塊結束，所以真實的塊數量會比可見的內容塊數量多一個。
?? ?點擊以下地址可以查看該實例，可以明顯地看到每一行的延遲輸出。
?? ?<chunked塊輸出實例>(寫完博文后發現我那破空間沒支持chunked編碼，大家拿源碼自己在本地運行吧╮(╯▽╰)╭)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head><body>111111111111111111111111111111111<br/><?phpob_flush();flush();sleep(2);?>222222222222222222222222222222222<br/><?phpob_flush();flush();sleep(2);?>333333333333333333333333333333333<br/><?phpob_flush();flush();sleep(2);?>444444444444444444444444444444444<br/><?phpob_flush();flush();sleep(2);?>555555555555555555555555555555555<br/></body>
</html>
大家可以看到，在PHP中，是通過flush()語句來將緩沖區里的數據實時發送到請求端，實現起來并不復雜。
?? ?ok，那么我們如何來通過chunked編碼塊的這個特性來實現頁面元素的異步渲染呢?是由服務器端輸出分塊的內容，其實就是一段<script>標簽內容，<script>標簽添加到頁面后，會由標簽內的js代碼來作頁面模塊渲染的控制，請看以下示例：
?? ?
??? <chunked塊模塊渲染>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>bigpipe demo</title><script type="text/javascript">function render(nodeID,html){document.getElementById(nodeID).innerHTML=html;}</script></head><body><div id="node1"><strong>loading...<strong></div><div id="node2"><strong>loading...<strong></div><div id="node3"><strong>loading...<strong></div><div id="node4"><strong>loading...<strong></div><script type="text/javascript">render("node1",'<div>lalalalal~~~~<br/>lalalalal~~~~<br/>lalalalal~~~~<br/>lalalalal~~~~<br/>lalalalal~~~~<br/></div>')</script><?phpob_flush();flush();sleep(2);?><script type="text/javascript">render("node2",'<div style="color:blue;">wa~~kakakakakakka~~~~~<br/>wa~~kakakakakakka~~~~~<br/>wa~~kakakakakakka~~~~~<br/></div>')</script><?phpob_flush();flush();sleep(2);?><script type="text/javascript">render("node3",'<div style="color:red;">wohahah...wohhahahah...<br/>woowowowo~~~~</div>')</script><?phpob_flush();flush();sleep(2);?><script type="text/javascript">render("node4",'<div>go~go~go~~~a~le~a~le~a~le~~~</div>')</script><?phpob_flush();flush();?></body>
</html>
?
總結
以上是生活随笔為你收集整理的利用bigpipe机制实现页面模块的异步渲染 chunked技术的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求一个快乐微信网名
- 下一篇： MySQL 水平分区方案Spock Pr