介绍bigpipe以及bigpipe在django上的实现

Bob.Chen

发布于 2018-05-02 06:01:11

1.3K00

代码可运行

文章被收录于专栏：程序员的诗和远方程序员的诗和远方

运行总次数：0

代码可运行

什么是BigPipe

关于BigPipe是在看一篇淘宝ued的官方博客上看到的，原文是说用nodejs做前后端分离的，只是稍微提了一下bigpipe。感兴趣的同学也可以看一下那篇文章，http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/

于是百度之，发现bigpipe是由facebook最先提出，个人感觉是个非常有意思的想法。关于bigpipe的介绍，网上有很多，这里简单说一下：

我们平常打开网页通常都是串行的，服务器收到请求后，开始各种渲染页面，等页面全部渲染好之后，再返回给浏览器，而在渲染过程中，浏览器则一直处于等待状态。

加入服务器有几个耗时的操作，总共需要花费10秒，则在这10秒钟内，浏览器属于一片空白，用户体验很不好。而bigpipe则是服务器接受到请求之后，立马返回一段骨架html，但是不包括闭合的body和html标签，这时候response并没有结束，每当服务器端准备好一块数据，就立即flush给浏览器，浏览器在收到骨架html之后，就立即开始渲染，之后每得到一段数据都进行渲染。

这样的好处是，也许整个页面也需要10秒才能完全显示出来，但是浏览器在第一秒就开始有东西显示。

还有一点需要特别说明的是，bigpipe使用javascript渲染页面，也就是说返回的是一对script标签，里面是一段javascript代码，这样的好处是，渲染页面的时候不会被块位置束缚，并且服务器支持多线程处理的话，可以同时处理多块内容，哪块先处理好，就flush回浏览器，不用在意html代码的物理顺序。后面每段返回的pagelet

也许有人会有疑问，咋看起来，BigPipe和Ajax非常像，那他们有什么不同呢。主要的不同点在于，Ajax每一块需要单独发送一个HTTP请求，建立连接的开销是比较大的，而BigPipe只有一个HTTP请求。所以Ajax相对于BigPipe来说，对服务器造成的压力更大。

开干

网上关于BigPipe的实现有很多，php和node.js是用的比较多的。

下面说下在python django框架下，实现一个BigPipe的例子，也方便大家理解BigPipe的思想。

首先，我们创建一个骨架模板，这个就是服务器在接收请求后，立即返回的html：

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>  
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="/site_media/js/prototype.js"></script>  
    <script type="text/javascript" src="/site_media/js/prototypepatch.js"></script>  
    <script type="text/javascript" src="/site_media/js/bigpipe.js"></script>

    <title>{{title}}</title>  
</head>  
<body >  
    <div id="content_0"></div>  
    <div id="content_1"></div>  
    <div id="content_2"></div>  
    <div id="content_3"></div>  
    <div id="content_4"></div>  
    <div id="content_5"></div>  
    <div id="content_6"></div>  
    <div id="content_7"></div>  
    <div id="content_8"></div>  
    <div id="content_9"></div> 
</body>
</html>

这段代码主要是有10个div，待会儿我们返回的内容就放在这些div里面，注意这里没有和这里引入了三个js文件，我们后面再说。

然后就是接收请求的django view：

import time  
from django.http import StreamingHttpResponse  
from django.template.loader import render_to_string

def test(request):  
    return StreamingHttpResponse(stream_response_generator())

由于我们不立即返回整个请求，所以并不直接返回HttpResponse对象，而是返回StreamingHttpResponse对象，并且这里的stream_response_generator函数返回的是生成器。关于python里面的生成器，请百度关键字yield。

stream_response_generator方法如下：

def stream_response_generator():

    yield render_to_string('bigpipe.html', {"title":"BigPipe Test Page"})  
    for x in range(0,10):  
        is_last = False  
        if x == 9: is_last = True  
        pagelet = dict(id="content_%s" % x, get_html_content=x,   
                        get_css_resources="", get_js_resources="",   
                        is_last=is_last )  
        yield render_to_string('pagelet.html',{'pagelet':pagelet})

        time.sleep(1)  
    yield "</body></html>\n"

yield render_to_string('bigpipe.html', {"title":"BigPipe Test Page"})这句就是把骨架html返回。

之后每次都会返回一段pagelet，代码为：yield render_to_string('pagelet.html',{'pagelet':pagelet})。

之后休息1秒再返回下一段pagelet，这个是为了模拟服务器耗时操作。

最后返回和标签： yield "</body></html>\n"

这里用了一个叫pagelet.html的模板文件，如下：

<script type="text/javascript">  
  BigPipe.onArrive({  
    id: '{{ pagelet.id }}',   
    innerHTML: '{% filter escapejs %}{{ pagelet.get_html_content }}{% endfilter %}',   
    css_files: ["/site_media/css/head.css", "/site_media/css/home.css"],   
    js_files: ["/site_media/js/utils.js"],   
    is_last: {{ pagelet.is_last|yesno:"true,false" }}  
    });  
</script>

这段javascript里面用到的BigPipe对象就是我们一开始在骨架HTML中引入的bigpipe. js中提供的，bigpipe.js依赖于prototype库。 bigpipe.js的github地址为:https://github.com/msroot/bigpipe 这里简单说下几个参数的意思：

id: 这个就是要把html放到哪个id下面，比如我们要放到id为content_0的div下面，这里就填content_0;
innerHTML: 就是具体的html代码;
css_files: 这段html代码依赖的css，bigpipe.js会先加载css文件，并且相同的css文件只会加载一次;
js_files: 这段html代码依赖的js文件，bigpipe.js会最后加载js文件，基本是等所有pagelet加载完才开始加载js文件;
is_last：标识这个pagelet是否是最后一个。

下图是用firebug看到的整个请求过程：

网页上的0到9，基本是一个一个出来的，间隔约1秒，整个请求是10.04秒，其中等待响应时间只有26毫秒。还要注意一点就是响应头中的 Transfer-Encoding:chunked也就是告诉浏览器，这个是分段返回的。

还有一点，apache等http服务器会对返回进行一定的缓存，也就是等有一定数量的文本再返回，这样我们如果直接跑上面的代码，不会得到我们预期的结果，这里需要把apache的mod_deflate模块给disable掉，在配置文件中加上: SetEnvIf Request_URI ^/mysite no-gzip=1 关于更多disable mod_deflate模块的信息，可以参考http://stackoverflow.com/questions/1922934/how-to-disable-mod-deflate-in-apache2

至此，大概就可以了解了bigpipe的整个思想，以及在django上的实现。

总结一下

BigPipe是个非常有意思的想法，并且已经在Facebook以及淘宝等大型公司使用了比较长时间。很可能是未来前端优化，提升用户体验的主要手段。
还有一点不足，由于要依赖于客户端javascript进行一部分html渲染的工作，所以服务器端返回的pagelet中的js代码要依赖于浏览器中javascript的实现，有些库用innerHTML表示需要填充的html，有些库用content等（一开始就吃了这个亏，还好可以看bigpipe.js的源代码)。所以貌似没有一个统一的标准，这样不方便写通用的库。
对于SEO来说，需要实现当蜘蛛来的时候在服务器组装好全部页面，然后返回。