網(wǎng)站建設(shè)前端優(yōu)化方法總結(jié)

用戶訪問網(wǎng)頁的等待時(shí)間,有80%是發(fā)生在瀏覽器前端，特別是頁面和頁面中各種元素(圖片、CSS、Javascript、flash...)的下載之上。

具體說明一下優(yōu)化的方法∶

對于一次訪問您網(wǎng)站,尚未在瀏覽器cache中緩存您網(wǎng)站內(nèi)容的用戶，我們可以做的事情包括:

1）減少一個(gè)頁面訪問所產(chǎn)生的http連接次數(shù)

對于一次訪問你網(wǎng)站的用戶,頁面所產(chǎn)生的 http 連接次數(shù)是影響性能的一個(gè)關(guān)鍵瓶頸。

對策︰

-盡量簡潔的頁面設(shè)計(jì)，大程度減少圖片的使用，通過放棄一些不必要的頁面特效來減少javascript的使用。

-使用一些優(yōu)化技巧，比如利用圖片的背景位移減少圖片的個(gè)數(shù);image map技術(shù)﹔使用Inline images將css圖片捆綁到網(wǎng)頁中。

一盡量合并js和css文件，減少獨(dú)立文件個(gè)數(shù)。

2）使用gzip壓縮網(wǎng)頁內(nèi)容

使用gzip來壓縮網(wǎng)頁中的靜態(tài)內(nèi)容，能夠顯著減少用戶訪問網(wǎng)頁時(shí)的等待時(shí)間(據(jù)說可達(dá)到60% )。主流的web服務(wù)器都支持或提供gzip 壓縮,如果使用apache服務(wù)器，只需要在配置文件中開啟mod_gzip ( apache1。x )或 mod_deflate(apache2.x)即可。凡是靜態(tài)的頁面，使用gzip 壓縮都能夠顯著提高服務(wù)器效率并減少帶寬支出，注意圖片內(nèi)容本身已經(jīng)是壓縮格式了，務(wù)必不要再進(jìn)行壓縮.

3)將CSS放在頁面頂端，JS文件放在頁面底端

CSS 的引用要放在 html的頭部 header中，JS文件引用盡量放在頁面底端標(biāo)簽的后面,主要的思路是讓核心的頁面內(nèi)容盡早顯示出來.不過要注意，一些大量使用js的頁面可能有一些js文件放在底端會引起一些難以預(yù)料的問題，根據(jù)實(shí)際情況適當(dāng)運(yùn)用即可。

4)使JS文件內(nèi)容小化

具體來說就是使用一些javascript壓縮工具對js腳本進(jìn)行壓縮,去除其中的空白字符、注釋，小化變量名等.在使用gzip壓縮的基礎(chǔ)上,對js內(nèi)容的壓縮能夠?qū)⑿阅茉偬岣?%。

5)盡量減少外部腳本的使用,減少DNS查詢時(shí)間

不要在網(wǎng)頁中引用太多的外部腳本,首先，一次dns的解析過程會消耗20-120毫秒的時(shí)間;其次，如果在網(wǎng)站頁面中引用太多的外部文件（如各種廣告、聯(lián)盟等代碼)，可能會因?yàn)橥獠课募捻憫?yīng)速度而將你的網(wǎng)站拖得很慢.如果不得不用，那么就盡量將這些腳本放在頁腳吧。不過有一點(diǎn)需要提及，就是瀏覽器一般只能并行處理同一域名下的兩個(gè)請求，而對于不同子的域名則不受此限制,因此適當(dāng)將本站靜態(tài)內(nèi)容( css , js )放在其他的子域名下(如static.xxx.com )會有利于提高瀏覽器并行下載網(wǎng)頁內(nèi)容的能力。

對于您網(wǎng)站的經(jīng)常性訪問用戶，主要的優(yōu)化思路就是大限度利用用戶瀏覽器的cache來減少服務(wù)器的開銷。

1)在header 中添加過期時(shí)間(Expires Header )

在header中給靜態(tài)內(nèi)容添加一個(gè)較長的過期時(shí)間,這樣可以使用戶今后訪問只讀取緩存中的文件，而不會與服務(wù)器產(chǎn)生任何的交互。不過這樣做也存在一些問題，當(dāng)圖片、CSS和js文件更新時(shí)，用戶如果不刷新瀏覽器，就無法獲得此更新。這樣,我們在對圖片、css和js文件修改時(shí);必須要進(jìn)行重命名，才能保證用戶訪問到新的內(nèi)容。這可能會給開發(fā)造成不小的麻煩，因?yàn)檫@些文件可能被站點(diǎn)中的許多文件所引用。flickr提出的解決辦法是通過url rewrite使不同版本號的URL事實(shí)上指向同一個(gè)文件，這是一個(gè)聰明的辦法，因?yàn)閡rl級別的操作效率是很高的,可以給開發(fā)過程提供不少便利。

2)將css和js文件放在獨(dú)立外部文件中引用

將css和js文件放在獨(dú)立文件中，這樣它們會被單獨(dú)緩存起來，在訪問其他頁面時(shí)可以從瀏覽器的高速緩存中直接讀取。一些網(wǎng)站的首頁可能是例外的，這些首頁的自身瀏覽可能并不大，但卻是用戶訪問網(wǎng)站的一印象以及導(dǎo)向到其他頁面的起點(diǎn)，也可能這些頁面本身使用了大量的ajax局部刷新及技術(shù)，這時(shí)可以將css和js文件直接寫在頁面中。

3）去掉重復(fù)的腳本

在正中，包含重復(fù)的js腳本會導(dǎo)致瀏覽器的緩存不被使用,仔細(xì)檢查一下你的程序,去掉重復(fù)引用的腳本應(yīng)該不是一件很難的事情.

4）避免重定向的發(fā)生

除了在 header中人為的重定向之外，網(wǎng)頁重定向常在不經(jīng)意間發(fā)生，被重定向的內(nèi)容將不會使用瀏覽器的緩存。比如用戶在訪問www。XXx。com，服務(wù)器會通過301轉(zhuǎn)向到www.xxx。com/,在后面加了一個(gè)“I”.如果服務(wù)器的配置不好，這也會給服務(wù)器帶來額外的負(fù)擔(dān)。通過配置apache的alias或使用mod_rewrite模塊等方法,可以避免不必要的重定向.

做完了上述的優(yōu)化，可以試著用yslow測試一下網(wǎng)頁的性能評分，一般都可以達(dá)到70分以上了。

當(dāng)然，除了瀏覽器前端和靜態(tài)內(nèi)容的優(yōu)化之外，還有針對程序腳本、服務(wù)器、數(shù)據(jù)庫、負(fù)載的優(yōu)化,這些更深層次的優(yōu)化方法對技術(shù)有更高的要求。