Facebook’s URL

首先要感谢黄老湿请来了大湿讲PPT

听大湿讲 PPT 听的热血沸腾,对 quickling 部分有个疑问

Facebook 页面切换是AJAX替换中间内容部分
好处是避免重复生成和下载共用部分(例如头尾)以节省服务器损耗和带宽还能提速

然后给URL后头加一个尾巴
好处是这地址复制给别人也能单独使用
(QQ空间不给力啊,刷新就去首页了…)

浏览器的前进后退历史记录等功能在特殊处理后也不会因为AJAX而痿掉

OK, 例如首页 http://www.facebook.com/

点了左侧的 messages

会AJAX从服务器拉中间部分的内容填进去

并把 URL 改为 http://www.facebook.com/#!/?sk=messages

当我们直接复制这串带着 hash (#后头这串)的地址给朋友,他们直接粘贴了访问的时候
浏览器请求 http://www.facebook.com/home.php
home.php里的脚本检测hash部分,
发现非空,
是#!/?sk=messages,
于是跳转到http://www.facebook.com/?sk=messages

依赖客户端做判断跳转?酱紫不是需要
服务器生成2个页面,
用户下载2个页面,
以及第一个页面hash检测脚本执行完毕之前的资源(因为脚本会阻塞后续)

为何不服务器直接根据用户请求的 URL 里的 hash 吐第二个页面给客户端捏?

混在一堆前端里头又不好意思问这个弱智问题,只好会后偷偷溜过去找大湿

大湿摸着我的头说: 我们也想啊,可客户端不发 hash过去

(一一!)

tail了一个 access_log 测试了一下,

果然如此

===毫无技术含量分隔====================

http://velocity.oreilly.com.cn/index.php?func=slidesvideos

这个 URL 包含的绝对是今年的性能和运维顶级盛宴

等有朝一日俺摸着别人头说啥啥啥的时候,肯定要谦虚的说:

“其实,我是一个运维”

22 评论

添加您的 →

我记得在早些时候,Gmail很早就提出这种hash的Ajax技术,怎么成facebook的了??
难道我记错了?? ❓

@paper, gmail一直在用,我没说是facebook的,而是facebook也在用哈
国外大公司经常分享和吸收新技术滴不像国内某些公司,为了培训资料不外泄,自己员工都不给了

貌似三四年前的x2blog也用了这个技术,http://www.supnate.com

受教了,原来gmail里的#xxx是这么回事,猛然发现twitter也是这么干的。关于用户下载2个页面那个,偶做个脚趾头也能想起来的弱智补充:
我猜测,缺省的facebook首页应该是很简单的,只有一个框架和若干js,js运行后,会加载一个缺省的页面放在中间,就是那个动态信息的那部分。这样看来,无论带不带hash,其实首页都是一样的处理,而且都会下载2个页面。
或者可以用firebug验证下。

@seatle, 如果判断不带hash,就不处理…那就只是一个页面请求啊,但是每个页面都会做这个判断

试了下,果然在一个请求的所有信息里都看到不到hash值。
偶然发现屏幕中间还有个箭头!

浏览器只认#!前面的页面URL,后面当锚点处理了~地图里面的定位有典型应用。

@Meck, 哈,这个是google定的爬虫接口规则,这个地址里有介绍滴,大家基于这个规则开发,
避免之前ajax不容易被收录的问题

发表回复