Tag Archives: bigpipe

也谈facebook的bigPipe

最近在做技术研究的时候,遇到了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时间把它转换成了弹出窗口。