淺談URL使用(yòng)在前端設計中的(de)優化(huà)

作者：admin  點擊次數：435  發布時(shí)間：2016-05-29

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

下(xià)面我就說說我對(duì)于URL在前端優化(huà)方面的(de)理(lǐ)解，希望大(dà)家指正。

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

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

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

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

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

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

本文很多(duō)觀點來(lái)自Steve Souders的(de)《高(gāo)性能網站建設指南(nán)》，本文内容比較偏，歡迎大(dà)家拍(pāi)磚。現在像google的(de)分(fēn)布式還(hái)有熱(rè)門的(de)雲計算(suàn)方面也(yě)是URL優化(huà)方面極具討(tǎo)論價值的(de)話(huà)題，歡迎大(dà)家討(tǎo)論指教。