淺談URL使用在前端設計中(zhōng)的優化

作者：admin  點擊次數：373  發布時間：2016-05-29

很多朋友都認爲關于URL優化方面的工(gōng)作是後端工(gōng)程師做的，前端方面注重結構方面的優化就可以了。其實不然，對于請求及DNS請求等等諸多方面，前端工(gōng)程師也應該在自己能做到的方面給予優化。

下(xià)面我(wǒ)(wǒ)就說說我(wǒ)(wǒ)對于URL在前端優化方面的理解，希望大(dà)家指正。

首先，第一(yī)點，比較“吝啬”，就是使用“c”、“j”、“i”文件夾分(fēn)别代替我(wǒ)(wǒ)們經常用的“css”、“javascript”、“images” 文件夾。如果沒有記錯的話(huà)，這個方法是Zeldman在《網站重構》第一(yī)版的時候提出來的(如果記錯了，歡迎大(dà)家指正)，我(wǒ)(wǒ)是比較贊成這個的。當然很多人會說，有這個必要嗎(ma)?我(wǒ)(wǒ)個人覺得有，雖然這樣做或許不會對頁面精簡帶來太大(dà)的效果，但是并不會帶來任何壞處。

第二點，對于鏈接到像http://www.example.com/dir/這樣的URL時候，記得在最後加上“/”，因爲如果你的網站包含目錄并使用了自動索引，不加結尾的斜線的話(huà)會頁面會多一(yī)次重定向。(p.s:對于鏈接到主機名的鏈接可以不必加)

第三點，就是上面已經提到的重定向問題。這應該是前端最應該重視的基于URL的優化問題，大(dà)家應該都有親身體(tǐ)驗重定向時的等待的不愉悅，尤其是第一(yī)個請求就是重定向時，用戶看到的是一(yī)個“漫長”的空白(bái)頁面過程。所以應該避免濫用重定向，不過很多時候(主要用在跟蹤)還是需要用到重定向，當然這也包括服務器的配置方面，不管怎麽說，我(wǒ)(wǒ)們還是在我(wǒ)(wǒ)們能做的方面盡量做好吧。

第四點，減少DNS的查找。對與這點，可以主要從增大(dà)DNS緩存時間和減少網站内容主機請求數量兩點來優化。對于第一(yī)點在網站端可以通過DNS的 TTL及HTTP的Keep-Alive來設置(雖然這不是HTTP1.1中(zhōng)必需的，但是很多浏覽器和服務器都包含它)。當然你在配置中(zhōng)得考慮自己網站的實際情況，确保你的内容和ip不會在你設置的時間内失效。在主機名數量上，減少唯一(yī)主機名的數量會減少頁面并行下(xià)載的數量，基于下(xià)面要說的原因，Steve Souders建議網站數據内容分(fēn)别放(fàng)在2-3個主機名下(xià)是最優選擇。

最後一(yī)點，将數據内容并行下(xià)載。在HTTP1.1規範下(xià)，建議浏覽器從每個主機名并行的下(xià)載兩個數據包内容，并且很多浏覽器默認都是這樣做的(可以打開(kāi)YSlow對照頁面在firefox下(xià)的結果)，如果你的頁面包含較多的圖片等數據内容，将其分(fēn)别放(fàng)在兩個主機名下(xià)，整體(tǐ)的下(xià)載時間将會有明顯的縮短。但是基于上面一(yī)點的原因，不要将内容放(fàng)在太多的主機下(xià)，至于實際幾個，可以通過自己的頁面情況考慮。

當然，基于URL的優化，在服務器方面的配置(包括CDN，路由等方面)效果明顯，但是我(wǒ)(wǒ)們前端在做好其他如頁面結構、頁面壓縮、HTTP請求數量等方面的優化下(xià)，進行上述的URL使用優化，肯定能使你的頁面有更好的呈現。

本文很多觀點來自Steve Souders的《高性能網站建設指南(nán)》，本文内容比較偏，歡迎大(dà)家拍磚。現在像google的分(fēn)布式還有熱門的雲計算方面也是URL優化方面極具讨論價值的話(huà)題，歡迎大(dà)家讨論指教。