大猫 (Madao) - まるでダメなおっさん

Facebook’s URL

by bigCat 22 Comments

首先要感谢黄老湿请来了大湿讲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 包含的绝对是今年的性能和运维顶级盛宴

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

“其实,我是一个运维”

Comments ( 22 )

  1. Reply刘永康
    不是怎么懂
  2. Replypaper
    我记得在早些时候,Gmail很早就提出这种hash的Ajax技术,怎么成facebook的了?? 难道我记错了?? :?:
    • ReplybigCat
      @paper, gmail一直在用,我没说是facebook的,而是facebook也在用哈 国外大公司经常分享和吸收新技术滴不像国内某些公司,为了培训资料不外泄,自己员工都不给了
  3. Reply匿名
    不懂,那hash不是url的一部分吗,为啥不传?
    • ReplybigCat
      @, 之前被当成锚点用的,对服务器没意义,估计因为这个所以不传了...
  4. ReplyFrank
    大猫的确适合当运维,哈哈 :!:
  5. ReplyMOPVHS
    运维....果然很像~~~ :oops:
  6. Reply时尚女装
    我似乎也有点雾水
  7. Reply枯藤昏鸦
    这次去听了O'Reilly Velocity China 2010 众大师的分享,受益匪浅。
  8. Reply飞鸟客
    貌似三四年前的x2blog也用了这个技术,http://www.supnate.com
  9. Reply囧啊囧
    看不懂,只是照片是谁?
  10. Replyseatle
    受教了,原来gmail里的#xxx是这么回事,猛然发现twitter也是这么干的。关于用户下载2个页面那个,偶做个脚趾头也能想起来的弱智补充: 我猜测,缺省的facebook首页应该是很简单的,只有一个框架和若干js,js运行后,会加载一个缺省的页面放在中间,就是那个动态信息的那部分。这样看来,无论带不带hash,其实首页都是一样的处理,而且都会下载2个页面。 或者可以用firebug验证下。
    • ReplybigCat
      @seatle, 如果判断不带hash,就不处理...那就只是一个页面请求啊,但是每个页面都会做这个判断
  11. Reply行骏
    试了下,果然在一个请求的所有信息里都看到不到hash值。 偶然发现屏幕中间还有个箭头!
    • ReplybigCat
      @行骏, 嘿嘿,一个主题里copy cat过来滴一个创意,上一篇下一篇
  12. Reply芒果
    浏览器只认#!前面的页面URL,后面当锚点处理了~地图里面的定位有典型应用。
    • ReplybigCat
      @芒果, 确切的说是#哈,后面的都算hash,!估计是方便匹配用
      • ReplyMeck
        @bigCat, 还可能是这个吧。..http://code.google.com/web/ajaxcrawling/index.html
        • ReplybigCat
          @Meck, 哈,这个是google定的爬虫接口规则,这个地址里有介绍滴,大家基于这个规则开发, 避免之前ajax不容易被收录的问题

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>