--这篇bigpipe的笔记早在一年前就想写了,但是一直被耽搁了。终于今天再翻看旧ppt时才想起要补上这篇博客。
本文中关于bigpipe的介绍是根据网络上的资料整理出来的(图片均来源于网络),而实现部分是博主的亲身实践。
搞互联网的同学也许都知道一个数字——4秒,有研究表明,如果一个网站没有在4秒之内加载完成,用户就会感到焦躁不愉快,并离开这个网站(数据来自性能测试网站http://gtmetrix.com/)。
2010 年初的时候,Facebook 的前端性能研究小组开始了他们的优化项目,经过了六个月的努力,成功的将个人空间主页面加载耗时由原来的5 秒减少为现在的2.5 秒。这是一个非常了不起的成就,也给用户来带来了很好的体验。在优化项目中,工程师提出了一种新的页面加载技术,称之为Bigpipe。
举个例子介绍bigpipe(借张图来解释):
在饭馆点菜吃的时候,如果点了四个菜,传统的网页加载模式是把所有菜都炒好了再上桌。当用户吃上菜的时候,已经是第5s了。而运用bigpipe输出页面,是炒一个就上一个菜,用户可以先吃着,厨师再炒第二个菜。甚至可以几个菜并发同时炒。所以用户吃上第一口菜的时间可以是第1s,比传统的提前了很多。
BigPipe提出分块的概念,即根据页面内容位置的不同,将整个页面分成不同的块儿– 称为pagelet。该技术的设计者Changhao Jiang 是研究电子电路的博士,可能从微机上得到了启发,将众多pagelet加载的不同阶段像流水线一样在浏览器和服务器上执行,这样就做到了浏览器和服务器的并行化,从而达到重叠服务器端运行时间和浏览器端运行时间的目的。使用BigPipe 不仅可以节省时间,使加载的时间缩短,而且可以同过pagelet的分步输出,使一部分的页面内容更快的输出,从而获得更好的用户体验。
FaceBook的页面被分成了很多不同的pagelets,如图:
页面加载时间消耗图:
bigpipe流水线式加载页面图:
传统模式(BP关闭):
流水线模式(BP开启):
页面等待服务器输出的时间从248ms 降到了 70 ms,也就是说最快70ms后就可以显示部分页面效果了。
传统模式:
<html> <div id="pl_main">主要内容</div> </html>
<html> <script scr="bigpipe.js"/> <div id="bigpipe_15" pageletName="pl_main">待替换内容</div> </html> <script>bigpipe.onPageletArrive({ "dependScripts":[], "dependStyles":[], "pageletId":"15", "pageletName":"pl_main", "htmlContent":"主要内容" }); </script>
<script>${param.bigpipeCallback}({ "dependScripts":[], "dependStyles":[], "pageletId":"15", "pageletName":"pl_main", "htmlContent":"${/test/222.html返回的html内容,注意需要对单/双引号做转义!}" }); </script>
利用HTTP1.1特性,实现分段输出: Transger-Encoding:chunked
输出模式:
3.5 自定义bigpipe标签
下面是一个使用自定义标签,将2个pagelet组织成一个jsp页面的例子:
<html> <script type="text/javascript" scr="bigpipe.js"/> <body> <bigpipe:page pageName="xxxx" renderMode="autoStreamline"> <bigpipe:pagelet pageletName="pagelet1"> <bigpipe:param name="userId">123</bigpipe:param> </bigpipe:pagelet> <bigpipe:pagelet pageletName="pagelet2"> <bigpipe:param name="type">111</bigpipe:param> </bigpipe:pagelet> </bigpipe:page> </body> </html>
原文地址:http://blog.csdn.net/patrickyoung6625/article/details/18653525