Fold All / Expand All

2014年3月9日 星期日

hashbang (#!) usage in URL

hashbang (#!),又稱為 shebang, sha-bang, pound-bang, hash-exclam, or hash-pling
來源:http://en.wikipedia.org/wiki/Shebang_(Unix)
原來主要是用於 Unix 系統上,用來指定 script interpreter ,例如我們在很多 shell script 的開頭會看到
#!/bin/sh
而現在很多 AJAX based 網站也會看到網址上有 hashbang,這原因是來自 Google 為了讓 dynamic content 網站,也可以被 Google index 內容,而提出的 spec
(謎:家大業大,就可以說了算)
但是 hashbang 的使用,卻在網路上引起了諸多討論,非常多人抱持著為什麼要加上這東西,讓網址變醜了呢
而原本大量使用 hashbang 的 twitter,在 2012年5月宣布,為了增進 twitter 網頁的速度,不使用 hashbang 了
https://blog.twitter.com/2012/improving-performance-on-twittercom
使用 hashbang 會讓網頁速度變慢的原因,一般說法是瀏覽器送 request 給伺服器時,因為會忽略 hash (#) 之後的內容,所以 hash 之後的字串,則是瀏覽器 JS 端再另外發 request 給伺服器。
抨擊使用 hashbang 的論點,很多都是說原本一個 HTTP request 就可以呈現網頁,現在至少要兩個 request 才行。
如果這個網頁原本就是 single request 就可以呈現所有內容,那改成 hashbang 再載入,當然是會變多 request ,進而增加載入時間。
然而,越來越多所謂的 web application style 頁面,第一個 request 都只是載入基本的框架,大多的內容都是透過 AJAX 再去拉回來,這種情形下,其實增加載入時間的說法,並不合理。
回到使用 hashbang 的原因,一開始是因為 web application style 網頁,為了讓網址可以對應目前頁面的狀態,而使用改變網址 hash (#) 的作法,才可以做到不重新載入頁面,而改變網址。
對 search engine bot 來說,hash 後面的內容,應該是要被略過的,這是原本 hash 的用途,代表相同網頁內的某一段 (anchor)。
而 Google 為了解決索引 web application style 網頁,提出 hashbang 方案。
那有沒有更好的方法呢?
透過 pushState(), replaceState() ,可以更換網址列看到的網址而不重新載入頁面
這麼好用的話,那就不用 hashbang 啦
嗯…不過 HTML5 History API 畢竟是個新東西,在瀏覽器相容性上,Chrome, Firefox 版本一直跳,已經支援一陣子了,而 IE 則是要從 10 才開始支援,Safari 查資料是說 5 開始有,不過列為 partial support (?)
http://caniuse.com/#feat=history
如果用 IE 9 去連 Facebook 的相片,就會發現還是會利用 hashbang 來改網址

沒有留言: