在使用开放平台的oauth授权时，我们发现ie6下页面回跳总是会丢失hash 那么hash和querystring这两个看起来很像的东西到底有什么区别呢？ 在前端mvc日益流行的今天，使用hash来做路由又会有什么隐患？ 本章将为你解开她们的面纱

1. DIFFERENCE BETWEEN
QUERY STRING & HASH
12年6月14日星期四 1

2. In JavaScript, the fragment identifier of the current HTML or
XHTML page can be accessed in the "hash" property
location.hash
12年6月14日星期四 2

3. Common
12年6月14日星期四 3

4. • They are both the part of a Uniform
Resource Locator (URL)
– http://server/path/program?query_string#fragment_identifier
Refer: http://en.wikipedia.org/wiki/Query_string
4
12年6月14日星期四 4

5. Difference
12年6月14日星期四 5

6. delimiter [difference]
12年6月14日星期四 6

7. • query string: & = ; ? #
– ? #: separator and not part of the query string
– & =: separator and part of the query string
– field1=value1&field2=value2&field3=value3...
• fragment identifier : #
– #: separator and part of the fragment identifiers
Refer: http://en.wikipedia.org/wiki/Query_string
12年6月14日星期四 7

8. url encoding[difference]
12年6月14日星期四 8

9. depended object [difference]
12年6月14日星期四 9

10. • Query string depend on the URI scheme
– e.g., http: supports queries unlike ftp:.
• Fragment identifier depend on the document MIME type
– with different mine type, its effect is different.
– for MIME text/html pages such as http://www.example.org/
foo.html#bar the fragment refers to the element with id="bar".
– for MIME text/plain , http://example.com/
document.txt#line=10,20 , this example identifies lines 11 through 20 of a
text document:
– for MIME application/pdf, http://example.org/doc.pdf#page=35
will cause Adobe Reader to open the PDF and scroll to page 35
Refer: http://en.wikipedia.org/wiki/Query_string
10
12年6月14日星期四 10

11. evaluated object [difference]
12年6月14日星期四 11

12. • Query string is evaluated by the server
• Fragment identifier is evaluated by the
client (Web browser).
• url hash不会发送至服务端
• url hash的变更不会引起网络请求
12
12年6月14日星期四 12

13. use
12年6月14日星期四 13

14. • query string:
– can be used to contain the content of an
HTML form
– tracking: be passed to the program which
generates the web page.
• <a href="frank.html?e0a72cb2a2c7">see my page!</a>
• <a href="ciccio.html?e0a72cb2a2c7">mine is better</
a>
Refer: http://en.wikipedia.org/wiki/Query_string
12年6月14日星期四 14

15. • fragment identifiers:
– refers to a resource that is subordinate to another,
primary resource. The primary resource is identified
by a Uniform Resource Identifier (URI), and the
fragment identifier points to the subordinate resource.
– eg: typically used to identify a portion of that
document.
– With the rise of AJAX, some websites use fragment
identifiers to emulate the back button behavior of
browsers for page changes that do not require a
reload, or to emulate subpages.
– process: first, use hash to memorize the page content
change; second, use js to analyze the value of hash
Refer: http://en.wikipedia.org/wiki/Fragment_identifier
12年6月14日星期四 15

16. • cross-domain pass parameters
– iframe adaptive height problem when cross
domain
– get img url when cross domain
12年6月14日星期四 16

17. function setHash(a){
! $.browser.msie?$.locationHash(a):location.hash=a;
}
$(window).hashchange(function(){
! doHash();
});
function doHash(){
! var h = location.hash;
switch (h) {
case "#ajax1":
ajaxFn1();
break;
case "#ajax2":
ajaxFn2();
break;
default:
$("#ajax").html("哈哈，hash没有啦！");
}
}
function ajaxFn1(){
! $("#ajax").load("hi.txt", function(){
! ! setHash("#ajax1");
! });
}
function ajaxFn2(){
! $.get("hi.html", function(t){
! ! $("#ajax").html(t);
! ! setHash("#ajax2");
! });
}
12年6月14日星期四 17

18. • apply kissy mvc router in shop
category manager
– url: siteadmin.daily.taobao.net/category/
auction.htm?sid=12203#!search?catId=-1
– why use #! ? It is suggest by google
– refer: support.google.com/webmasters/bin/
answer.py?hl=en&answer=174992
12年6月14日星期四 18

19. – examples:
• kissy, mvc, router
• Gmail uses a single URL for almost every interface – mail boxes,
individual mails, search results, settings – the fragment is used to
make these interfaces directly linkable.[6]
• Adobe Flash websites can use the fragment part to inform the user
about the state of the website or web application, and to facilitate
• deep linking, commonly with the help of the SWFAddress JavaScript
library.
• Other websites use the fragment part to pass some extra information
to scripts running on them – for example, Google Video understands
permalinks in the format of #01h25m30s to start playing at the
specified position,[7] and YouTube uses similar code such as
#t=3m25s.[8] A format of #t=10,20 for a section of media from 10
to 20 seconds is proposed in the Media Fragments URI 1.0 W3C
Working Draft.[9]
12年6月14日星期四 19

20. does url length has impact on
page load speed?
12年6月14日星期四 20

21. 第一等级的优化，70字节
如何计算的呢？
21
12年6月14日星期四 21

22. Refer: http://blog.csdn.net/aimingoo/article/details/6081964 - ncz
22
12年6月14日星期四 22

23. what http header include?
23
12年6月14日星期四 23

24. • http 请求头部信息
12年6月14日星期四 24

25. • 资源文件的get请求http头部的最大长度是496字节
• http头部包含两大部分：
★ 可缺省的: 占 184字节
★ 必须的：占496－184 ＝ 312字节， 包含：get , user-agent, cookie
‣ 其中cookie可被缓存，所以相当与长度为0字节
‣ user-agent的长度在214字节左右
‣ 故剩下get部分的长度 = 496-214-78个字节
• 这么做的效果：当我们总是从浏览器端发出最小化的HTTP请求时，网络总是可以最快速的将请求提
交到服务器，无需等待多个包并组合。这在慢速网络，以及存在大量丢包的网络中效果将为极为明
显。简单地说，如果有人在局域网中用迅雷或BT，那么最小化HTTP请求将会使网页的浏览体验提升
得相当相当明显。
Refer: http://blog.csdn.net/aimingoo/article/details/6081964 - ncz
12年6月14日星期四 25

26. use
12年6月14日星期四 26

27. • But with 78 bytes url， what we can do is very little. One
common url is longer than this length.
• eg: http://assets.daily.taobao.net/apps/taesite/platinum/
scripts/common/mods/shop/custom-banner/custom-
banner.js (109 bytes)
12年6月14日星期四 27