BT

Facebook创新之BigPipe:优化页面加载时间

作者 Dave West ,译者 张龙 发布于 2010年8月1日 | 注意: 挥一挥衣袖,带走满满干货,关注活动大本营,时不时发福利呦!

近日,Facebook的研究科学家Changhao Jiang介绍了一个名为BigPipe的技术,这项技术可使Facebook站点的访问速度提升一倍。BigPipe是Facebook的创新研究之一,同时也是Facebook的“秘密武器”,它能够极大提升站点的性能:在大多数浏览器中,BigPipe都能将用户感受到的延迟时间降低一半,除了Firefox 3.6,BigPipe可以将Firefox 3.6的延迟时间降低50ms左右,大约降低了22%左右。

BigPipe及相关创新的驱动力是:

相比于10年前,现代Web站点的动态性与交互性都迈上了一个新台阶,传统的页面处理模型已经无法满足当今Internet速度上的需求了。

受到硬件的启发(管道与标量微处理器),Facebook团队使用PHP和JavaScript(并不需要改变现有的Web服务器和浏览器)“重新设计了现有的Web服务处理过程”。重新设计的内容包括:将页面处理过程分解为8个不同的步骤(每个步骤叫做一个“pagelet”),其中一些步骤可以并行处理。通过返回如下内容来响应最初的页面请求:

一个未闭合的HTML文档,包含了HTML head标签和body标签的第一部分内容。head标签包含了BigPipe的JavaScript库,用于解释稍后收到的pagelet响应内容。在body标签中,有个模板指定了页面的逻辑结构和pagelets的占位符。

然后创建JSON编码的对象(即pagelets),里面包含了“pagelet需要的所有CSS、JavaScript资源、HTML内容以及一些元数据”。

复杂网页不断攀升的加载时间延迟问题已经不是什么新话题了,也有不少人提出使用某种管道技术来提升性能。Aaron Hopkins在Die.net上讨论过如何优化页面加载时间,除了传统的页面请求生命周期外,还有不少影响因素可以影响到页面加载的延迟时间。Aaron提到的有趣儿的一点是:

IE、Firefox与Safari默认情况下是禁用管道的;Opera是我所知道的唯一一个启用了管道的浏览器。禁用管道意味着需要应答每个请求,在下一个请求发出前需要释放掉上一个请求所建立的连接。这样就增加了用户等待的延迟时间,平均延迟时间为双向的ping时间除以允许的连接数。如果服务器禁用了HTTP持续连接(keepalives),那么还需要再进行一次TCP三次握手,这又导致一次双向连接,造成延迟时间加倍的后果。

Jiang并没有说BigPipe利用了浏览器所固有的管道功能,实际上却暗示了BigPipe并没有这么做,因为他说不需要对现有的服务器与浏览器进行任何改变。一旦浏览器发生了变化(比如HTML 5的广泛实现),BigPipe创新的用途是否还会这么大,我们不得而知。

Kensaku Komatsu创建了一个示例(The Zinger谈到了该示例):

... 对HTML5 Web Sockets中的数据流与XML HTTP Request进行了对比。运行结果令人震惊:565毫秒对31444毫秒,天哪!Web Sockets快了55倍,这是因为Web Sockets减少了大量不必要的header信息。

该示例使用了HTTP Pipelining,但通常人们认为这么做有些“危险”:

这并非HTTP Pipelining。网络传输是由WebSocket frames构成的,而非HTTP请求与响应。显然,这是由应用作者控制的,并不会遇到HTTP/1.1管道的问题。由于WebSockets可以在任何时间发送与接收,可以由程序员直接控制,因此它并不会遇到代理干扰(proxy interference)的问题,管道功能是安全的,不应该禁用。

Komatsu的示例将Facebook的创新、HTTP管道问题以及HTML 5的未来有机联系在了一起,尤其是WebSockets以及他们最终该如何交互以提升Web站点的性能并最大限度地降低用户等待的延迟时间。

查看英文原文:BigPipe at Facebook: Optimizing Page Load Time

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

木有看懂 by Cui Guangyu

木有看懂。 不知道意思是不是说一次请求过来一大堆的字符串或者别的什么, 然后客户端的javascript慢慢构造DOM,构造图片, 构造需要的东西?如果是的话, 似乎不是很新啊。。。

有错别字 by 冯 希顺

“平均延迟时间为双向的ping时间处以允许的连接数。”,这里的“处以”貌似需要变成“除以”。。。

Re: 木有看懂 by 冯 希顺

这有一篇文章是对Facebook这个技术的分析(好像作者还不知道这个BigPipe技术):
www.cnblogs.com/BearsTaR/archive/2010/06/18/fac...



我觉得这样还有一个好处是容易做缓存。可能Facebook某个页面是动态的,但是页面中的大部分内容是静态的,如果以整个页面来进行管理就无法进行缓存了,分开就很容易缓存了。

Re: 有错别字 by 张 龙

多谢,已修复

研究科学家 by Shooter Evan

哇塞。。。瞧人家,都不是 “开发工程师”了。。。。研究科学家。。。

chunck 和 压缩 怎么权衡,不知facebook有否这方面的实际数据 by 杜 嘉伟

这样做虽然可以将应答分块供js可以并发处理,但使用chunck技术,就无法压缩传输内容, facebook是怎样权衡这“压缩”和chunck 之间的得失的?
不知facebook有否这方面的实际数据?

Re: chunck 和 压缩 怎么权衡,不知facebook有否这方面的实际数据 by 靳 文祥

chunked和gzip压缩是可以一起使用的啊。

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

7 讨论
提供反馈
错误报告
商务合作
内容合作
Marketing
InfoQ.com及所有内容,版权所有 © 2006-2016 C4Media Inc. InfoQ.com 服务器由 Contegix提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司 京ICP备09022563号-7 隐私政策
BT