BigPipe

1. 技术背景 FaceBook页面加载技术 试想这样一个场景，一个常常访问的网站，每次打开它的 页面都要要花费6 秒；同时另一个网站提供了类似的服务，但响应时间只需3 秒，那么你会如何选择呢？数据代表，若是用户打开一个网站，等待3~4 秒尚未任何反应，他们会变得急躁，焦虑，抱怨，甚相当闭网页而且再也不访问，这是很是糟糕的状况。因此，网页加载的速度十分重要,尤为对于拥有遍及全球的 5亿用户的Facebook(全球最大的社交服务网站)这样的大型网站，有着大量并发请求、海量数据等客观状况，速度就成了必须攻克的难题之一。

2010 年初的时候，Facebook 的前端性能研究小组开始了他们的优化项目，通过了六个月的努力，成功的将我的空间主页面加载耗时由原来的5 秒减小为如今的2.5 秒。这是一个很是了不得的成就，也给用户来带来了很好的体验。在优化项目中，工程师提出了一种新的页面加载技术，称之为Bigpipe。目前淘宝和 Facebook 面临的问题很是类似：海量数据和页面过大，若是能够在详情页、列表页中使用bigpipe，或者在webx中集成bigpipe，将会带来明显的页面加载 速度提高。

2. 相关介绍 2.1 网站前端优化的重要性

《高性能网站建设指南》一书中指出，只有 10%~20%的最终用户响应时间是花费在从Web 服务器获取HTML 文档并传送到浏览器中的。若是但愿可以有效地减小页面的响应时间，就必须关注剩余的80%~90%的最终用户体验。作个比较，若是对后台业务逻辑进行优 化，效率提升了50%，但最终的页面响应时间只减小了5%~10%，由于它所占的比重较少。若是对前端进行性能优化，效率提高50%，则会使最终页面响应 时间减小40%~45%。这是多么可观的数字！另外，前端的性能优化通常比业务逻辑的优化更加容易。因此，前端优化投入小，见效快，性价比极高，须要投入 更多的关注。

2.2 BigPipe与AJAX

Web2.0的重要特征是网页显示大量动态内容，即 web2.0注重网页与用户的交互。其核心技术是AJAX，现在全部主流网站都或多或少使用AJAX。与AJAX相似，BigPipe 实现了分块儿的概念，使页面可以分步输出，即每次输出一部分网页内容。接下来讨论BigPipe 与AJAX 的区别。

简单的说，BigPipe 比AJAX 有三个好处：

1. AJAX 的核心是XMLHttpRequest，客户端须要异步的向服务器端发送请求，而后将传送过来的内容动态添加到网页上。如此实现存在一些缺陷，即发送往返 请求须要耗费时间，而BigPipe 技术使浏览器并不须要发送XMLHttpRequest 请求，这样就节省时间损耗。

2. 使用AJAX时，浏览器和服务器的工做顺序执行。服务器必须等待浏览器的请求，这样就会形成服务器的空闲。浏览器工做时，服务器在等待，而服务器工做时， 浏览器在等待，这也是一种性能的浪费。使用BigPipe，浏览器和服务器能够并行同时工做，服务器不须要等待浏览器的请求，而是一直处于加载页面内容的 工做阶段，这就会使效率获得更大的提升。

3. 减小浏览器发送到请求。对一个5亿用户的网站来讲，减小了使用AJAX额外带来的请求，会减小服务器的负载，一样会带来很大的性能提高。

基于以上三点，Facebook 在进行页面优化时采用了BigPipe 技术。目前淘宝主搜索结果页中，须要加载类目，相关搜索，宝贝列表，广告等内容，前端这里使用php 的curl 的批处理来并发的访问引擎获取相应的数据，并进行分步输出。这种模式仍是与bigpipe有些不一样，这点后面会讲到。通常来说，在页面比较大，并且比较复 杂，样式表和脚本比较多的状况下，使用BigPipe 来优化输出页面是比较合适的。另外很是重要的一点，BigPipe 并不改变浏览器的结构与网络协议，仅使用JS就能够实现，用户不须要作任何的设置，就会看到明显的访问时间缩短。

3 目前的问题 接下来讨论现有的瓶颈。面对网页愈来愈大的状况，尤为是大量的css 文件和js 文件须要加载，传统的页面加载模型很难知足这样的需求，直接结果就是页面加载速度变慢，这毫不是咱们但愿看到的。目前的技术实现中，用户提出页面访问请求后，页面的完整加载流程以下：

1. 用户访问网页，浏览器发送一个HTTP 请求到网络服务器

2. 服务器解析这个请求，而后从存储层去数据，接着生成一个html 文件内容，并在一个HTTP Response 中把它传送给客户端

3. HTTP response 在网络中传输

4. 浏览器解析这个Response ，建立一个DOM 树，而后下载所需的CSS 和JS文件

5. 下载完CSS 文件后，浏览器解析他们而且应用在相应的内容上

6. 下载完JS 后，浏览器解析和执行他们

图1.

完整流程见图1.图中左侧表示服务器，右侧表示浏览 器。浏览器先发送请求，而后服务器进行查找数据，生成页面，返回html 代码，最后浏览器进行渲染页面。这种模式有很是明显的缺陷：流程中的操做有着严格的顺序，若是前面的一个操做没有执行结束，后面的操做就不能执行，即操做 之间是不能重叠。这样就形成性能的瓶颈：服务器生成一个页面的内容时，浏览器是空闲的，显示空白内容；而当浏览器加载渲染页面内容时，服务器又是空闲的， 时间与性能的浪费由此产生。

图2.

考虑图2 中现有的服务模型，横轴表示花费的时间。黄色表示在服务器的生成页面内容的时间，白色表示网络传输时间，蓝色表示在浏览器渲染页面的时间。能够看出，现有 的模式形成很大的时间浪费。 考虑图3 中的状况，图中绿色表示服务器从春储层取查数据花费的时间，在海量数据下，当执行一条很费时的查询语句时（以下图右侧），服务器就就阻塞在那 里没有其余操做，而浏览器更是得不到任何反馈。这会形成很是不友好的用户体验，用户不知道什么缘由使他们等待很长时间。

图3.

4 BigPipe思想与原理 面对上述问题，咱们看下BigPipe的解决办法。 BigPipe提出分块的概念，即根据页面内容位置的不一样，将整个页面分红不一样的块儿– 称为pagelet。该技术的设计者Changhao Jiang 是研究电子电路的博士，可能从微机上获得了启发，将众多pagelet加载的不一样阶段像流水线同样在浏览器和服务器上执行，这样就作到了浏览器和服务器的 并行化，从而达到重叠服务器端运行时间和浏览器端运行时间的目的。使用BigPipe 不只能够节省时间，使加载的时间缩短，并且能够同过pagelet的分步输出，使一部分的页面内容更快的输出，从而得到更好的用户体验。BigPipe 中，用户提出页面访问请求后，页面的完整加载流程以下:

1. Request parsing：服务器解析和检查http request

2. Datafetching：服务器从存储层获取数据

3. Markup generation：服务器生成html 标记

4. Network transport ： 网络传输response

5. CSS downloading：浏览器下载CSS

6. DOM tree construction and CSS styling:浏览器生成DOM 树，而且使用CSS

7. JavaScript downloading: 浏览器下载页面引用的JS 文件

8. JavaScript execution: 浏览器执行页面JS代码

这个8 个流程几乎与上文中提到现有的模式没有区别，但这整个流程只是一个pagelet 的完整流程，而多个pagelet 的不一样操做阶段就能够像流水线同样进行执行了。

图4

图4 中，能够看出BigPipe 对原有的模式进行的改进。浏览器发送访问请求，而后浏览器分步返回不一样的pagelet的内容，具体实现将在后面介绍.考虑图5中的改进，BigPipe 打破了原有的顺序执行，将页面分红不一样的pagelet ，如此一来，全部的pagelet 的执行时间累加起来仍是原有的时间。可是， 经过叠加不一样pagelet 的不一样阶段的执行时间，使总的运行时间大大减小，这就是Bigpipe减小页面加载时间的秘密。

FaceBook的页面被分红了不少不一样的pagelets，如图：

图5
8 结论

通过上面的讨论，咱们能够发现，使用BigPipe 技术优化页面能够有四个好处：

1． 减小页面的加载时间

2． 使页面分步输出，改善用户体验

3． 使页面结构化，提升可读性，更加便于维护

4． 每一个pagelet 都是相互独立的，若是有一个pagelet 的内容不能加载，并不会影响其余的pagelet 的内容显示。

同时，BigPipe 是一项比较新的理念， 在去年六月份才由Facebook 的工程师提出，应该说有很大的发展空间。BigPipe 的原理很是简单，并不会引入不少额外的负担，适用范围很广，容易上手。几乎全部的网页均可以采用BigPipe 的理念去进行优化，尤为对因而有着海量数据和网页比较大的网站，将会以低成本带来高回报。通常来说，网站越大，脚本和样式表越多，浏览器版本越旧，网络环 境越差，优化的结果越可观。

9 引用与参考资料

1.做者的博客：http://www.facebook.com/note.php?note_id=389414033919

2.bigpipe技术的ppt：http://twork.taobao.net/books/237

3.bigpipe的java实现:http://codemonkeyism.com/facebook-bigpipe-java/

4.一篇介绍bigpipe的文章：http://www.54chen.com/architecture/rose-pipe-http-54chen.html

5.另外一篇挺有用的文章：http://www.cnblogs.com/BearsTaR/archive/2010/06/18/facebook_html_chunk.html

6.人人网相似bigpipe的技术–rosepipe：http://www.54chen.com/architecture/rose-open-source-portal-framework.html

7．《高性能网站建设指南》by Steve Souder， Copyright 2007 Steve Sounder， 978-0-596- 52930-7