布猫

最近在做技术研究的时候，遇到了bigPipe。

关于bigPipe的官方文章在这里 http://www.facebook.com/note.php?note_id=389414033919 （天朝得翻墙）。

有位叫 limu的仁兄发表了 http://limu.javaeye.com/blog/765173 这篇文章。 我表示一般赞成的。

但是，可能是这仁兄facebook用的少吧～那并不是bigPipe的全部。

limu仁兄说到，先点菜，然后各个大厨一起做菜，然后给用户端上来，举个反证：

http://www.facebook.com/pages/ka-ti-nuo-wang-guo-CK101lun-tan/107749042613155 （AD一下CK的粉丝页）

用户每次点菜（打开新页面）时，先载入框架，再ajax调用内容填充上去。但是，针对这一次载入，反而给服务器多填了几个请求不是么？

不理解？我们分析看看，比方说一个页面有8个框框要填东西，如果用传统的方式，这8个框框本来可以随着主框架一次载入进来，如果某个框框需要更新，那么我们就ajax再载入和更新对应的位置。这样一来，第一次的成本就只有1次服务器开销。而facebook也同样可以实现高速的载入，肯定不会像limu仁兄说的，超过500ms。

不管数据来自哪里，服务端怎么缓冲，这8个框框的内容肯定都会被用户载入到浏览器的。

那么每次多8个请求，有何意义呢？

让我们来正确的分析一下吧：

http://www.facebook.com/pages/ka-ti-nuo-wang-guo-CK101lun-tan/107749042613155

一个该页面的请求，如果浏览器支持js，那么html部分只有框架，其后跟着大量的js的json对象，跟limu兄说的一样。

这时候，左侧喜欢他的网友框里面显示：

以上图片的红框“芮世軒”这个网友，链接为 http://www.facebook.com/profile.php?id=100000868569268

ok，当我们在页面上点击该链接，不出意外，浏览器的地址栏会是这个链接地址吧？

但是…当你点击该链接并且载入该网友信息后，链接地址却是：

http://www.facebook.com/pages/ka-ti-nuo-wang-guo-CK101lun-tan/107749042613155#!/profile.php?id=100000868569268

哦？一个锚链！！而页面上的东西已经全变成这个网友的个人主页了～

bigpipe拦截了我的a标签的click动作，又通过ajax方式调用了该网友的信息，在当前这个ck粉丝页上，能用的动态框框就复用，不能用的就隐藏，没有的就添加，制造了一个网友的个人首页出来。

而他又给该粉丝页增加了一个锚链，既可以个goback创造空间，又让网友可以通过这个加了锚链的地址直接访问这个网友的页面。

事实上，ck的粉丝页，并不含有一个#!/profile.php?id=100000868569268锚链，而这个锚链是告诉服务器，该页的实际位置的。

那么至此，大家应该明白，第一次还要分8块载入的原因了吧？就算请求某个实际页面，最终呈现成什么样子或者分成几块，也不取决于框架。

这样一来：

如果访问http://www.facebook.com/pages/ka-ti-nuo-wang-guo-CK101lun-tan/107749042613155#!/profile.php?id=100000868569268

跟ck的粉丝页，基本上没有关系了，出来的结果是那个网友的个人主页。

另外，还有一些弹出窗口也设计成这样：

比方说“分享”按钮，其实href是http://www.facebook.com/ajax/share_dialog.php?s=99&appid=2309869772&p[]=1149318559&p[]=129942140395896&action_link=share

但实际上，页面不动，而facebook截取了click时间把它转换成了弹出窗口。