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 包含的绝对是今年的性能和运维顶级盛宴

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

“其实,我是一个运维”


已发布

分类

来自

标签:

评论

《“Facebook’s URL”》 有 22 条评论

  1. 刘永康 的头像

    不是怎么懂

  2. paper 的头像
    paper

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

    1. bigCat 的头像

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

  3.  的头像
    匿名

    不懂,那hash不是url的一部分吗,为啥不传?

    1. bigCat 的头像

      @, 之前被当成锚点用的,对服务器没意义,估计因为这个所以不传了…

  4. Frank 的头像

    大猫的确适合当运维,哈哈 ❗

  5. MOPVHS 的头像

    运维….果然很像~~~ 😳

  6. 时尚女装 的头像

    我似乎也有点雾水

  7. 枯藤昏鸦 的头像

    这次去听了O’Reilly Velocity China 2010 众大师的分享,受益匪浅。

    1. bigCat 的头像

      @枯藤昏鸦, 我们只有牛逼的人才能报销机票去…羡慕嫉妒恨

  8. 飞鸟客 的头像
    飞鸟客

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

    1. bigCat 的头像

      @飞鸟客, 🙂 速度很快!用的最传神的就是gmail了吧

  9. 囧啊囧 的头像

    看不懂,只是照片是谁?

    1. bigCat 的头像

      @囧啊囧, 哈,Facebook的蒋长浩博士

  10. seatle 的头像
    seatle

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

    1. bigCat 的头像

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

  11. 行骏 的头像

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

    1. bigCat 的头像

      @行骏, 嘿嘿,一个主题里copy cat过来滴一个创意,上一篇下一篇

  12. 芒果 的头像

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

    1. bigCat 的头像

      @芒果, 确切的说是#哈,后面的都算hash,!估计是方便匹配用

        1. bigCat 的头像

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

回复 MOPVHS 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注