BigPipe:高性能的"流水线技术"网页（3）

在客户端在收到Pagelet通过“onPageletArrive”发出的指令，BigPipe的JavaScript库将首先下载它的CSS资源；在CSS资源被下载完成后，BigPipe将在Pagelet的标记HTML显示它的innerHTML。多个Pagelets的CSS可在同一时间下载，它们可以根据其各自CSS的下载完成情况来确认显示顺序。在BigPipe中，JavaScript资源的优先级低于CSS和页面内容。因此，BigPipe不会在所有Pagelets显示出来之前下载任何Pagelet中的JavaScript。然后，所有Pagelets的JavaScript异步下载。最后Pagelet的JavaScript初始化代码根据其各自的下载完成情况来确定执行顺序。

这种高度并行系统的最终结果是，多个Pageletsr的不同执行阶段同时进行。例如，浏览器可以正在下载三个Pagelets CSS的资源，同时已经显示另一Pagelet内容，与此同时，服务器也在生成新的Pagelet。从用户的角度来看，页面是逐步呈现的。最开始的网页内容会更快的显示，这大大减少了用户的对页面延时的感知。如果您要自己亲眼看到区别，你可以尝试以下连结： 传统模式和BigPipe。第一个链接是传统模式单一模式显示页面。第二个链接是BigPipe管道模式的页面。如果您的浏览器版本比较老，网速也很慢，浏览器缓存不佳，哪么两页之间的加截时间差别将更加明显。

性能测试结果

下图是传统模式和BigPipe性能数据比较图，数据是75％用户对一个页面中最重要的内容（例如：新闻动态被认为是在Facebook主页上最重要的内容）的感知延迟时间。收集数据方式是加载Facebook主页50次并且禁用浏览器缓存。该图显示BigPipe使用户在大多数浏览器中感受到的延迟减少了一半。

(Facebook主页的延迟时间对比)

值得一提的是BigPipe是从微处理器的流水线中得到启发。然而，他们的流水线过程之间存在一些差异。例如，虽然大多数阶段BigPipe只能操作一次Pagelet，但有时多个Pagelets的CSS和JavaScript下载却可以同时运作，这类似于超标量微处理器。BigPipe另一个重要区别是，我们实现了从并行编程引入的“障碍”概念，所有的Pagelets要完成一个特定阶段，如多个Pagelet显示区，它们都可以进行进一步JavaScript下载和执行。

在Facebook，我们鼓励创造性思考。我们不断的尝试创新技术，以使我们的网站更快。

作者蒋长浩目前是Facebook的研究科学家，他致力于研究使网站更快的各种创新。

（译者还找到了几篇关于BigPipe的文章，如果有兴趣大家可以了解下：Facebook创新之BigPipe：优化页面加载时间、名站技术分析 — facebook奇特的页面加载技术、Facebook让网站速度提升一倍的BigPipe技术分析、Facebooks BigPipe Done in Java、Open BigPipe javascript implementation、Tutorial: Implementing Facebook’s BigPipe Using ASP.Net MVC、BigPipe Done in Node.js）