BigPipe是一種提高網頁響應速度的技術。
先上例子：
<?php /* big pipe demo */ ?>
<!DOCTYPE html>
<html>
<head>
<title>BigPipe Demo 3</title>
<script>
function render(pageletId,html){
document.getElementById(pageletId).innerHTML=html;
}
</script>
</head>
<body>
<div id='header'><p>Loading…</p></div>
<div id='content'><p>Loading…</p></div>
<div id='footer'><p>Loading…</p></div>
</body>
<?php
ob_start();
ob_flush();
flush();
sleep(1);
$header = str_pad('<span>111111</span>', 4096);
?>
<script>render('header', "<p><?php echo $header;?><p>");</script>
<?php
ob_flush();
flush();
sleep(1);
$content = str_pad('<span>222222</span>', 4096);
?>
<script>render('content', "<p><?php echo $content;?><p>");</script>
<?php
ob_flush();
flush();
sleep(1);
$footer = str_pad('<span>333333</span>', 4096);
?>
<script>render('content', "<p><?php echo $content;?><p>");</script>
<?php
ob_flush();
flush();
sleep(1);
$footer = str_pad('<span>333333</span>', 4096);
?>
<script>render('footer', "<p><?php echo $footer;?><p>");</script>
<?php
ob_flush();
flush();
?>
</html>
配置:
php.ini中的output_buffering要設置成4096。如果使用的網頁服務器是Nginx，需要關閉gzip和fastcgi_buffers。fastcgi_buffers通常配置在文件conf/fastcgi_params中，通過include在nginx.conf中引用。
解釋：
使用ob_flush、flush和str_pad三個函數，是爲了將當前已經渲染的頁面發送到瀏覽器。沒有采用Big pipe技術時，頁面是全部生成完畢後，再發送到瀏覽器端。瀏覽器端只有一次渲染。而採用Big pipe技術時，頁面被拆分成多個小塊，然後像流一樣傳送到瀏覽器的。服務器生成一塊頁面就發送一塊，瀏覽器也會有多次渲染，瀏覽器收到一塊頁面就渲染一塊。頁面總的加載時間沒有變化，但是瀏覽器開始渲染的時間提前，用戶體驗更好。而且和採用Ajax的方式相比，Big pipe只有一次tcp連接，編碼複雜度也很低。Big
pipe的流程大概是：
服務器 瀏覽器 用戶
生成頁面塊1 ---> 渲染頁面塊1 ---> 瀏覽頁面塊1
生成頁面塊2 ---> 渲染頁面塊2 ---> 瀏覽頁面塊2
生成頁面塊3 ---> 渲染頁面塊3 ---> 瀏覽頁面塊3
使用的函數：
bool ob_start([callback $output_callback[, int $chunk_size[, bool $erase]]])
打開output buffer。當output buffer是打開的，php不會發送數據，而是寫到output buffer中。
void ob_flush(void);
將output buffer中的數據發送出去。手動使用ob_flush、flush和str_pad，是爲了在輸出頁面時，保證輸出的一個完成的html標籤。如果由php管理緩存的刷新，可能出現輸出不完整的html標籤，導致頁面和最終頁面（全部加載完畢）的不一樣。
void flush(void);
刷新php的write buffers。
string str_pad(string $input, int $pad_length[, string $pad_string = ""[, int $pad_type = STR_PAD_RIGHT]]);
是用指定字符填充字符串。使用時pad_length應該和output_buffering的設置一致。
參考：
http://huoding.com/2011/06/26/88
http://www.alibuybuy.com/posts/66345.html
http://www.oschina.net/p/bigpipe/similar_projects
http://www.cnblogs.com/mofish/archive/2011/11/03/2234858.html
BigPipe筆記
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章