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

作(zuò)者：admin  點擊次數(shù)：824  發布時(shí)間(jiān)：2016-05-±‌29

很(hěn)多(duō)朋(péng)友(yǒu)都(dōu)認為(wèi)關™ 于URL優化(huà)方面的(de)工(gōng)作(zuò)是₹α¥ (shì)後端工(gōng)程師(shī)>±λ♦做(zuò)的(de)，前端方面注重結構方面的(de)優化(huà)就(★≠¥jiù)可(kě)以了(le)。其實不(bù)然，>∏δ對(duì)于請(qǐng)求及DNS請(qǐn>↕g)求等等諸多(duō)方面，前端工(gōng)程師(sh$$±ī)也(yě)應該在自(zì)己能(néng)做(zuò)到(dà×≤×o)的(de)方面給予優化(huà)。

下(xià)面我就(jiù)說(shuō)說(shuō)我♠♥$對(duì)于URL在前端優化(huà)方面的(de)®←理(lǐ)解，希望大(dà)家(jiā)指正。

首先，第一(yī)點，比較“吝啬”，就(j→±β&iù)是(shì)使用(yòng)&ldqu¥<÷o;c”、“j”、“i&rdqσ→"​uo;文(wén)件(jiàn)夾分(fēn)别代替我們™×​ε經常用(yòng)的(de)“css”、&ldquo♥β ;javascript”、“image↔♠¥πs” 文(wén)件(jiàn)夾。如(rú)果沒有(yǒ£✔u)記錯(cuò)的(de)話(huà)，這(zh ' ₩è)個(gè)方法是(shì)Zeldman在《網站(zhàn)重構》第一(y♠δ‍☆ī)版的(de)時(shí)候提出來(lái)的(de)(如(rú)果£≥↑記錯(cuò)了(le)，歡迎大(dà)家±↕(jiā)指正)，我是(shì)比較贊成這(zhè)個↓™ '(gè)的(de)。當然很(hěn)多(duō)人(rén)會(huì)說£€(shuō)，有(yǒu)這(zhè)個(gè)必要(↕♠yào)嗎(ma)?我個(gè)人(rén)覺得(de)有(yǒu)，雖然'×這(zhè)樣做(zuò)或許不(bù)會(huì)對(duì≥•)頁面精簡帶來(lái)太大(dà)的(de)效果，但±¥♣↕(dàn)是(shì)并不(bù)會(huì)帶來(lái)任何壞處。

第二點，對(duì)于鏈接到(dào)像http://www &×.example.com/dir/這(zhè)樣的(de)URL時(shí"ε↑)候，記得(de)在最後加上(shàng)“/&rdqu≈¶<o;，因為(wèi)如(rú)果你(nǐ)的(de)網站(zhàn)包含目∞≥錄并使用(yòng)了(le)自(zì)動索引，不(bù)∏•‌加結尾的(de)斜線的(de)話(huà)會(huì)頁面會(huì)多(↓∏≠¶duō)一(yī)次重定向。(p.s:對(duì)于鏈接到(₹✔dào)主機(jī)名的(de)鏈接可(kě)以不(bù)必加)

第三點，就(jiù)是(shì)上(shàng€≈)面已經提到(dào)的(de)重定向問(wèn)題。這(zhè)應該φ 是(shì)前端最應該重視(shì)的(de)基于URL的(d×εe)優化(huà)問(wèn)題，大(dà↕®≠)家(jiā)應該都(dōu)有(yǒu)親身(shēn)體(✔★≠☆tǐ)驗重定向時(shí)的(de)等待的( '∑←de)不(bù)愉悅，尤其是(shì)第一♣→‌(yī)個(gè)請(qǐng)求就(jiù)是(shì)重定向時(shíφ>δ )，用(yòng)戶看(kàn)到(dào)的(de)是(sh∏§×ì)一(yī)個(gè)“漫長(cháng)”的( λ"de)空(kōng)白(bái)頁面過程。↔♦♠所以應該避免濫用(yòng)重定向，不(bù)過很(hěn)多(d αuō)時(shí)候(主要(yào)用(yòng)在跟蹤)還‍↑(hái)是(shì)需要(yào)用(yòng)到(dà≠§εo)重定向，當然這(zhè)也(yě)包括服務器(qì)的(​±de)配置方面，不(bù)管怎麽說(shuō)，我們還(hái)是(sh​∞✘ì)在我們能(néng)做(zuò)的(de)方面盡量做(zuò)好(✘↔✘hǎo)吧(ba)。

第四點，減少(shǎo)DNS的(de)查找。對(duì)與♣‌這(zhè)點，可(kě)以主要(yào)從(cóng)增大(d ₩→à)DNS緩存時(shí)間(jiān)和(hé)減<€少(shǎo)網站(zhàn)內(nèi)容主機(jī)請(qǐng≥♣)求數(shù)量兩點來(lái)優化(huà)。對(duì)于第一↔επ↑(yī)點在網站(zhàn)端可(kě)以通(tōng)過DNS的(dγ₩e) TTL及HTTP的(de)Keep-Alive來(lái)設置(∞σ✔雖然這(zhè)不(bù)是(shì)HTTP1.©×↓1中必需的(de)，但(dàn)是(shì)很₽€→(hěn)多(duō)浏覽器(qì)和(hé)服務器(qì)都(↑≠dōu)包含它)。當然你(nǐ)在配置中得(de)考慮自(zì)己網站(zhλ​α§àn)的(de)實際情況，确保你(nǐ)的(de)內(nèi)容和(hé)♦γip不(bù)會(huì)在你(nǐ)設置的(de)時(™✘shí)間(jiān)內(nèi)失效。在主機(jī)名數(shù)量上(sh★'≤àng)，減少(shǎo)唯一(yī)主機(jī)名σ↑↓✔的(de)數(shù)量會(huì)減少(shǎo)頁面并行(xíng₩€)下(xià)載的(de)數(shù)量，基于∞®下(xià)面要(yào)說(shuō)的(de)原因，Steve∑♦ Ω Souders建議(yì)網站(zhàn)數(shù)據內(nè"≤i)容分(fēn)别放(fàng)在2-3個(gè)主÷"機(jī)名下(xià)是(shì)最優選擇。

最後一(yī)點，将數(shù)據內(nèi)容并行(xíβ∞∑$ng)下(xià)載。在HTTP1.1規範下(xià)，建議(yì) §浏覽器(qì)從(cóng)每個(gè)主機(jī)名☆≠✘σ并行(xíng)的(de)下(xià)載兩個(gè)數(shù'×®₩)據包內(nèi)容，并且很(hěn)多(duō)浏覽器 φ€(qì)默認都(dōu)是(shì)這(zhè)樣做(zuò)的(‍←de)(可(kě)以打開(kāi)YSlow對(duì)←♠₽×照(zhào)頁面在firefox下(xià)的(de)結果)，π☆↓₹如(rú)果你(nǐ)的(de)頁面包含較多(duō)的(de)圖片等數(☆δ≥•shù)據內(nèi)容，将其分(fēn)别放(fàng)在兩個( ₹←≤gè)主機(jī)名下(xià)，整體(t>€βǐ)的(de)下(xià)載時(shí)間(jiān)将會(huì)有(yǒuσ★)明(míng)顯的(de)縮短(duǎn)。但(dàn)是 €≥÷(shì)基于上(shàng)面一(yī)點的(de)✔‍≤×原因，不(bù)要(yào)将內(nèiσ‌©)容放(fàng)在太多(duō)的(de)主機(jī)下(xià)，至→≠₩于實際幾個(gè)，可(kě)以通(tō'✔ng)過自(zì)己的(de)頁面情況考慮。

當然，基于URL的(de)優化(huà)，在服務器(q​σì)方面的(de)配置(包括CDN，路(lù)由等方面)效果明(míng)÷$✔α顯，但(dàn)是(shì)我們前端在做(zuò)好(hα‌Ω€ǎo)其他(tā)如(rú)頁面結構、頁面壓">縮、HTTP請(qǐng)求數(shù)量等方面的(de)優化(huà)下(<↑xià)，進行(xíng)上(shàng)述的 ±™(de)URL使用(yòng)優化(huà)，肯定能(néng)使你(nǐ)的 ↓(de)頁面有(yǒu)更好(hǎo)的(de)呈現(xiàn↓←×↓)。

本文(wén)很(hěn)多(duō)觀點來(lái)自(zì♣←)Steve Souders的(de)《高(gāo)性能(néngπ€→')網站(zhàn)建設指南(nán)》，本文(wén)內(nèi)容比較偏，<φ歡迎大(dà)家(jiā)拍(pāi)磚。現(xiàn)在像google的(d​→e)分(fēn)布式還(hái)有(yǒu)熱(rè)門(mén↓<)的(de)雲計(jì)算(suàn)方面也(∏ €§yě)是(shì)URL優化(huà)方面極具討(tβ↔ǎo)論價值的(de)話(huà)題，歡迎大(dà)家(≈α‍jiā)討(tǎo)論指教。