介绍bigpipe以及bigpipe在django上的实现
Posted on 2015-02-04 in Python by yucongchen
什么是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里面,注意这里没有