Hash Bang的一点点思考

经常会在网站上看到这样的url设计http://example.com/#some-page
为什么要这么来设计呢?
我认为本质的原因是希望Ajax的请求也能拥有一个URL方便于其在互联网上进行传播。那么如何做到这一点呢?
细细分解这个地址浏览器首先会请求http://example.com加载完成js后,由js解析#号后面的some-page并发送一个的ajax请求获取数据进行页面渲染。

现在采用这种设计的典型应用

  • 1)用来做网页分割,导航带动主显示区的联动,曾今facebook和twitter都采用了这种手段
  • 2)对于翻页和弹层显示内容的ajax应用提供一个假的URL能够对应到相应的资源。

但是国外的网站一般都使用#!path这样的URL,而并不是简简单单的使用#,这是为什么,其主要的原因google的一项举措。

google认为http://example.com/#!path是一个pretty url,http://example.com?xxx=path是一个ugly的url。后面的结论我不反对,但是第一个结论我不完全赞同。因为利用ajax去定位资源我认为其本身也是ugly的,而且并不是说明url写成#!path就意味着google一定能够索引ajax的请求,而是#!path还需要有一个与之相对应的?_escaped_fragement_=path返回html文本google才能索引。
详情请见: https://developers.google.com/webmasters/ajax-crawling/docs/specification

上面我说了一些#设计考虑的方面,但并不是全部,下面我再讲讲我对于#的态度。我不建议使用#结合ajax的方式去定位一个页面,我建议大多数的情况下使用Html5新的pushState API来代替(当然使用html5新特性最大的敌人就是浏览器,这个就根据自身产品的用户来决定)。

为什么我不建议使用#或者#!

  • 1)实际上这样的url并不能直接定位到对应的资源,也许你按照google的要求可以被google收录,但是你同时也抛弃了其他搜索引擎。而实际上认真的写html才是最重要的,这样所有的网络爬虫都能够正确的索引。
  • 2)一旦JS没有加载上很可能导致页面无法加载的情况。
  • 3)一旦JS出现了意想不到的错误也可能导致页面无法加载。
  • 4)原本一次请求现在变成了两次请求,页面加载速度降低和一些不必要的性能开销。

原本希望在Facebook和twitter上找一些url来作为反面教材,今天发现都已不见了踪影,记得几天前twitter的followers的url还是http://twitter.com/#!followers而今天再看已经变成了http://twitter.com/followers。我想Hash Bang已经完成了它的历史使命慢慢地应该退出历史的舞台了。

参考资料:
http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs
http://dannythorpe.com/2011/02/09/side-effects-of-hash-bang-urls/

Meta

Published: Sept. 11, 2012 Author: ivan Comments:   Word Count: 7
Bookmark and Share

Next: 利用Dropbox备份Blog数据

Previous: RRDTOOL安装指南

Tags

facebook hash_bang twitter url

Article Links

  1. https://developers.google.com/webmasters/ajax-crawling/docs/specification
  2. isolani - Javascript: Breaking the Web with hash-bangs
  3. Side Effects of Hash-Bang URLs | Danny Thorpe
Comments powered by Disqus