很多朋友都認(rèn)為關(guān)于URL優(yōu)化方面的工作是后端工程師做的,前端方面注重結(jié)構(gòu)方面的優(yōu)化就可以了。其實不然,對于請求及DNS請求等等諸多方面,前端工程師也應(yīng)該在自己能做到的方面給予優(yōu)化。
下面就介紹一下URL在前端優(yōu)化方面幾點需要注意的地方。
首先,第一點,比較“吝嗇”,就是使用“c”、“j”、“i”文件夾分別代替我們經(jīng)常用的“css”、“javascript”、“images”文件夾。當(dāng)然很多人會說,有這個必要嗎?個人覺得有,雖然這樣做或許不會對頁面精簡帶來太大的效果,但是并不會帶來任何壞處。
第二點,對于鏈接到像http://www.example.com/dir/這樣的URL時候,記得在最后加上“/”,因為如果你的網(wǎng)站包含目錄并使用了自動索引,不加結(jié)尾的斜線的話會頁面會多一次重定向。(p.s:對于鏈接到主機名的鏈接可以不必加)
第三點,就是上面已經(jīng)提到的重定向問題。這應(yīng)該是前端最應(yīng)該重視的基于URL的優(yōu)化問題,大家應(yīng)該都有親身體驗重定向時的等待的不愉悅,尤其是第一個請求就是重定向時,用戶看到的是一個“漫長”的空白頁面過程。所以應(yīng)該避免濫用重定向,不過很多時候(主要用在跟蹤)還是需要用到重定向,當(dāng)然這也包括服務(wù)器的配置方面,不管怎么說,我們還是在我們能做的方面盡量做好吧。
第四點,減少DNS的查找。對與這點,可以主要從增大DNS緩存時間和減少網(wǎng)站內(nèi)容主機請求數(shù)量兩點來優(yōu)化。對于第一點在網(wǎng)站端可以通過DNS的 TTL及HTTP的Keep-Alive來設(shè)置(雖然這不是HTTP1.1中必需的,但是很多瀏覽器和服務(wù)器都包含它)。當(dāng)然你在配置中得考慮自己網(wǎng)站的實際情況,確保你的內(nèi)容和ip不會在你設(shè)置的時間內(nèi)失效。在主機名數(shù)量上,減少唯一主機名的數(shù)量會減少頁面并行下載的數(shù)量,基于下面要說的原因,Steve Souders建議網(wǎng)站數(shù)據(jù)內(nèi)容分別放在2-3個主機名下是最優(yōu)選擇。
最后一點,將數(shù)據(jù)內(nèi)容并行下載。在HTTP1.1規(guī)范下,建議瀏覽器從每個主機名并行的下載兩個數(shù)據(jù)包內(nèi)容,并且很多瀏覽器默認(rèn)都是這樣做的(可以打開YSlow對照頁面在firefox下的結(jié)果),如果你的頁面包含較多的圖片等數(shù)據(jù)內(nèi)容,將其分別放在兩個主機名下,整體的下載時間將會有明顯的縮短。但是基于上面一點的原因,不要將內(nèi)容放在太多的主機下,至于實際幾個,可以通過自己的頁面情況考慮。
當(dāng)然,基于URL的優(yōu)化,在服務(wù)器方面的配置(包括CDN,路由等方面)效果明顯,但是我們前端在做好其他如頁面結(jié)構(gòu)、頁面壓縮、HTTP請求數(shù)量等方面的優(yōu)化下,進(jìn)行上述的URL使用優(yōu)化,肯定能使你的頁面有更好的呈現(xiàn)