白话BigPipe

赞助

如果你觉得我写得还行,欢迎付费支持。

所谓BigPipe,指的是Facebook开发的用来改善客户端响应速度的技术。本质上讲,其实它并不是新事物,原理上等同于Yahoo在Best Practices for Speeding Up Your Web Site里提出的Flush the Buffer Early,不过BigPipe的实现更灵活,所以有必要了解一二。

我们平常浏览网页时的体验通常是串行的:浏览器发起请求,服务器收到后渲染页面,在此期间,浏览器除了等待别无选择,演示代码如下:

<?php
sleep(1);
$header = 'header';

sleep(1);
$content = 'content';

sleep(1);
$footer = 'footer';
?>
<html>
<head>
<title>test</title>
</head>
<body>

<div id="header"><?php echo $header; ?></div>

<div id="content"><?php echo $content; ?></div>

<div id="footer"><?php echo $footer; ?></div>

</body>
</html>

注:代码里用sleep模拟服务端耗时的操作。

如果我们把串行改成并行的方式呢?每当服务器生成新的内容立刻发送给浏览器,浏览器立刻渲染,不必等到接收到全部数据再处理,毫无疑问会提升用户体验,代码如下:

提醒一下,代码最后运行在Apache + Mod PHP环境,旧版本Apache可能需要关闭GZip。如果是Nginx + PHP FastCGI环境,因为fastcgi_buffers的存在,运行效果会非你所愿。

<html>
<head>
<title>test</title>
</head>
<body>

<?php sleep(1); ?>
<div id="header"><?php echo str_pad('header', 1024); ?></div>
<?php ob_flush(); flush(); ?>

<?php sleep(1); ?>
<div id="content"><?php echo str_pad('content', 1024); ?></div>
<?php ob_flush(); flush(); ?>

<?php sleep(1); ?>
<div id="footer"><?php echo str_pad('footer', 1024); ?></div>
<?php ob_flush(); flush(); ?>

</body>
</html>

注意:某些浏览器必须接收到一定长度的内容才开始渲染,所以代码里用到了str_pad

更新:新版Nginx增加了一个fastcgi_buffering指令,可以用来关闭fastcgi的buffer功能。

代码里用到ob_flushflush把页面分块刷新缓存到浏览器,此时如果使用Firebug查看响应头的话,会发现:Transfer-Encoding=chunked,如此一来浏览器就可以分块渲染了。

BigPipe在此基础上更进一步,演示代码如下:

<html>
<head>
<title>test</title>
</head>
<body>

<div id="header"></div>

<div id="content"></div>

<div id="footer"></div>

<?php ob_flush(); flush(); ?>

<?php sleep(1); $header = str_pad('header', 1024); ?>
<script>
document.getElementById("header").innerHTML = "<?php echo $header; ?>";
</script>
<?php ob_flush(); flush(); ?>

<?php sleep(1); $content = str_pad('content', 1024); ?>
<script>
document.getElementById("content").innerHTML = "<?php echo $content; ?>";
</script>
<?php ob_flush(); flush(); ?>

<?php sleep(1); $footer = str_pad('footer', 1024); ?>
<script>
document.getElementById("footer").innerHTML = "<?php echo $footer; ?>";
</script>
<?php ob_flush(); flush(); ?>

</body>
</html>

使用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)。

白话BigPipe》上有18条评论

  1. 我在文章里已经说了:如果是Nginx + PHP FastCGI环境,因为fastcgi_buffers的存在,运行效果会非你所愿。
    有什么解决办法没?

  2. Added: in Nginx in the + PHP FastCGI environment to run the text code will be found to be invalid, which is caused by the cache. Nginx FastCGI environment, if less than , cache memory, or if the data is less than cache to the hard disk. Because the flush is only valid function of the Apache environment, does not apply to Nginx environment, so the only way out is to find ways to turn off caching can be found through experiments even fastcgi_buffers and fastcgi_max_temp_file_size is banned or not, so that so far, Nginx + PHP FastCG can not be achieved BigPipe relatively feasible way is by Apache + Mod PHP BigPipe Nginx on the role of the proxy server and use turn off the proxy cache.
    参考:http://www.webdbtips.com/118212/

  3. Pingback引用通告: 白话BigPipe[转载] - Android - 开发者第993415个问答

  4. Pingback引用通告: Nginx中的PHP缓冲问题

  5. Pingback引用通告: Nginx中的PHP缓冲问题 - 编程语言综合 - 开发者第2317438个问答

  6. Pingback引用通告: BigPipe原理(转) | Touch PHP

发表评论

电子邮件地址不会被公开。 必填项已用*标注