假设有如下代码:
<?php for ($i=10; $i>0; $i--) { echo $i; flush(); sleep(1); } ?>
按代码理解似乎应该是每过1秒钟,将输出一个数字,从10~1 (运行时间>10ms)
而使用nginx作为web服务器时,会发现上面的代码,在程序运行10ms后一次性输出了10~1
通过搜索,找到一段如下的说明:
Nginx的FastCGI环境中,如果数据小于fastcgi_buffers,会缓存到内存中,如果数据小于fastcgi_max_temp_file_size,会缓存到硬盘上。
但在实际的例子中,我发现,只要我缓存中的字符串长度大于等于php.ini中output_buffering设定的值,flush还是有作用的。
示例Demo就是类似于Facebook的BigPipe(点此查看Facebook网站的Ajax化、缓存和流水线PDF>>),文章参考了(利用bigpipe机制实现页面模块的异步渲染)
在我下载的PHP中,它的配置文件php.ine中output_buffering的值被设定为4096
; Note: Output buffering can also be controlled via Output Buffering Control ; functions. ; Possible Values: ; On = Enabled and buffer is unlimited. (Use with caution) ; Off = Disabled ; Integer = Enables the buffer and sets its maximum size in bytes. ; Note: This directive is hardcoded to Off for the CLI SAPI ; Default Value: Off ; Development Value: 4096 ; Production Value: 4096 ; http://php.net/output-buffering output_buffering = 4096
测试例子在Windows下测试通过(nginx/0.7.59、PHP 5.3.4)
1ms左右可以看到完整的页面
对应的HTML结构
<!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> 1: 2: function render(nodeID,html){ 3: document.getElementById(nodeID).innerHTML=html; 4: }</script> </head> <body> <div id="header"><p>Loading...</p></div> <div id="content"><p>Loading...</p></div> <div id="footer"><p>Loading...</p></div> <script>render('header', '<p><span class="blue">111111</span>
返回的头部信息
HTTP/1.1 200 OK Server: nginx/0.7.59 Date: Fri, 01 Jul 2011 17:01:00 GMT Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive X-Powered-By: PHP/5.3.4
11ms后header区域被初始化,将显示1111
21ms后,content、footer渲染完成,整个页面也就呈现出来了
(其实这里有点奇怪,和预期的不大相符,预期从进入页面开始计时1ms后显示111111,11ms后显示222222,21ms后才显示333333,而这里222222、333333是同时在21ms后渲染出来的,我想还是nginx的缓存上有点问题~)
整个页面被分成5块输出
块与块之间有标识符,如下所示:
fbc <!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> 1: 2: function render(nodeID,html){ 3: document.getElementById(nodeID).innerHTML=html; 4: }</script> </head> <body> <div id="header"><p>Loading...</p></div> <div id="content"><p>Loading...</p></div> <div id="footer"><p>Loading...</p></div> <script> 1: render('header', '<p><span class="blue">111111</span> 2: ff6 3: <p>');</script> <script> 1: render('content', '<p><span class="red">222222</span> 2: ff7 3: <p>');</script> <script> 1: render('footer', '<p><span class="green">333333</span> 2: 34d 3: <p>');</script> </body> </html> 0
整个测试页面的源文件php也很简单:
<!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).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> <?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>