The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

網頁開發人員應對 URL 的大小寫「有感覺」!

我以前混 Linux 的時候就對檔名的大小寫很注意,因為一個英文字母的大小寫搞錯就會都找不到網頁,之後雖然改混 Windows 也沒丟掉之前的習慣,雖然 NTFS 檔案系統或 IIS 在處理 URL 時預設不會特別區分大小寫,打錯大小寫依然找的到網頁,但不管是網址還是檔名,我對大小寫還是很龜毛,看到別人亂取檔名或 URL 大小寫與檔案大小寫不同時也多少也會唸一下,我還曾經被譏笑太無聊,不過今天我就要證明我的堅持是對的!

Windows 領域的開發人員大多對大小寫「沒感覺」或覺得「沒差」,但如果你打算建構一個超高流量的網站,就必須注意任何微小細節,包括 URL 的大小寫也不例外。

我們都知道透過 Browser Cache 機制可有效加速網頁下載速度,被快取過的 URL 會直接從本機取得網路資源 ( 圖片, JavaScript, CSS, … ),我之前也寫過【簡易克服 CSS 被瀏覽器快取(Cache)的問題】文章可有效克服 用戶端快取 (Client-side Cache) 的問題,但各位可能不會想到當 URL 完全不變僅將大小寫修改���,就可以避免該 URL 不被用戶端快取。

舉個簡單的例子證明,例如我的部落格有張圖片有設定用戶端快取,網址是:

http://blog.miniasp.com/themes/TheWillWillWeb/images/img06.jpg

我總共抓三次此圖片:

  1. 當用戶端第一次取得該圖片時,由於尚未快取,所以會抓取完成的內容 ( HTTP 200 )
  2. 由於該圖片已經快取至瀏覽器,所以第二次再要求一次該圖片,瀏覽器就不會再次下載,直接取得本機快取的內容!
  3. 第三次我刻意修改圖片的副檔名,由於瀏覽器會視為完全不同的網址,因此會再次從 Server 下載圖片!

請參照以下圖示:

依據這個特性,在規劃大型網站時就必須注意,如果你已經將網站回應速度與下載速度都最佳化,結果卻因為網頁 HTML 內的圖片、CSS、JavaScript 檔案的大小寫問題而導致內容重複下載,一來佔用頻寬、二來也拉長網頁下載的時間,或許這超級小技巧對大部分情況來說無關痛癢,但專業來自對細節的堅持,當網站需要這些小細節來支援時,就很好用了!

其實我今天講的這個小技巧並沒有說「好」與「壞」,而是希望你「有感覺」而已,當你想有效提升全站的網頁效能,你應該注意所有 URL 都能注意使用統一的大小寫;如果你想讓該網頁立即重整,避免部分檔案被用戶端快取且不想加上奇怪的尾巴的話,就可以稍稍修改檔名大小寫,讓使用者就算開啟網頁原始碼察看也完全沒感覺。