所谓BigPipe，指的是Facebook开发的用来改善客户端响应速度的技术。本质上讲，其实它并不是新事物，原理上等同于Yahoo在Best Practices for Speeding Up Your Web Site里提出的Flush the Buffer Early，不过BigPipe的实现更灵活，所以有必要了解一二。
我们平常浏览网页时的体验通常是串行的：浏览器发起请求，服务器收到后渲染页面，在此期间，浏览器除了等待别无选择，演示代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BigPipe Demo 3</title>
<style type="text/css">
* {margin: 0; padding:0;}
body {background-color:#fff;}
div{border:2px solid #4F81BD; margin:30px; padding: 10px;}
p {word-wrap:break-wrod; word-break:break-all; color: #666;}
.red {color: #f00;}
.blue {color:blue;}
.green {color:green;}
</style>
<script>
function render(nodeID,html){
document.getElementById(nodeID)[removed]=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>
<?php
ob_flush();
flush();
sleep(1);
//填充缓冲区
$header = str_pad('<span class="blue">111111</span>', 4096);
?>
<script>render('header', '<p><?php echo $header;?><p>');</script>
<?php
ob_flush();
flush();
sleep(10);
$content = str_pad('<span class="red">222222</span>', 4096);
?>
<script>render('content', '<p><?php echo $content;?><p>');</script>
<?php
ob_flush();
flush();
sleep(10);
$footer = str_pad('<span class="green">333333</span>', 4096);
?>
<script>render('footer', '<p><?php echo $footer;?><p>');</script>
<?php
ob_flush();
flush();
?>
</body>
</html>
注：代码里用sleep模拟服务端耗时的操作。
如果我们把串行改成并行的方式呢？每当服务器生成新的内容立刻发送给浏览器，浏览器立刻渲染，不必等到接收到全部数据再处理，毫无疑问会提升用户体验，代码如下：
提醒一下，代码最后运行在Apache + Mod PHP环境，旧版本Apache可能需要关闭GZip。如果是Nginx + PHP FastCGI环境，因为fastcgi_buffers的存在，运行效果会非你所愿。
注意：某些浏览器必须接收到一定长度的内容才开始渲染，所以代码里用到了str_pad 将输出内容强制到4096字节。
更新：新版Nginx增加了一个fastcgi_buffering指令，可以用来关闭fastcgi的buffer功能。
代码里用到ob_flush和flush把页面分块刷新缓存到浏览器，此时如果使用Firebug查看响应头的话，会发现：Transfer-Encoding=chunked，如此一来浏览器就可以分块渲染了。
使用BigPipe，先刷新布局（Layout），然后按块（header，content，footer）刷新相应的Javascript代码，从而实现页面内容的填充。
BigPipe之所以使用Javascript渲染页面，是因为这样一来渲染页面的时候，就不会被块的位置束缚住，如果我们的服务器支持多线程，那 么就可以同时处理多块内容，哪块先处理好就把哪块刷新到浏览器，即便不支持多线程，服务器也可以按照内容的重要程度分主次先后渲染，不必拘泥于HTML代 码的物理顺序。
此外还应注意一下BigPipe和Ajax二者的区别，对于一个分成若干个块的页面而言，如果使用Ajax的话，每一块都需要单独发送一个HTTP 请求，而如果使用BigPipe的话，不管有多少块，都仅有一个HTTP请求。所以Ajax对服务器造成的压力会是BigPipe的若干倍。
注：BigPipe不利于SEO，应用时可通过User Agent判断请求是人还是搜索引擎，如果是人的话，则应用BigPipe渲染模式，如果是搜索引擎的话，则应用传统渲染模式。
参考：Facebook网站的Ajax化、缓存和流水线（PDF）。
评论