web應(yīng)用優(yōu)化的研究

web應(yīng)用優(yōu)化的研究

1http請(qǐng)求優(yōu)化減少頁(yè)面的http請(qǐng)求的數(shù)量是第一步，這是提高訪問用戶等待時(shí)間的最重要方法。1.1關(guān)聯(lián)多個(gè)帶超鏈接的圖片在站點(diǎn)導(dǎo)航中,最常見的應(yīng)用就是超鏈接,它通常帶有一些文本,并被關(guān)聯(lián)到目標(biāo)URL上。一種更為沒關(guān)的選擇是將超鏈接關(guān)聯(lián)到圖片上,例如在導(dǎo)航欄或按鈕中。如果是以這種形式關(guān)聯(lián)多個(gè)帶有超鏈接的圖片,使用圖片地圖既能減少HTTP請(qǐng)求,又無(wú)需改變頁(yè)面外觀感受。圖片地圖(ImageMap)允許你在一個(gè)圖片上關(guān)聯(lián)多個(gè)URL,目標(biāo)URL的選擇取決于用戶單擊了圖片上的哪個(gè)位置。獲取圖片地圖的時(shí)間比獲取為每個(gè)超鏈接使用分離圖片的導(dǎo)航時(shí)間快很多,這是因?yàn)閳D片地圖減少了HTTP請(qǐng)求。1.2內(nèi)聯(lián)成政府小塊數(shù)據(jù)內(nèi)聯(lián)圖片是指在Web頁(yè)面中包含圖片但無(wú)需任何額外的HTTP請(qǐng)求,它允許將小塊數(shù)據(jù)內(nèi)聯(lián)為立即數(shù),數(shù)據(jù)就在其URL自身之中,格式如下:示例:data:URL模式大多數(shù)用于內(nèi)聯(lián)圖片,也可以用在任何需要指定URL的地方,如:script和a標(biāo)簽中。1.3web頁(yè)面引用大多數(shù)Web站點(diǎn),都會(huì)用到JavaScript腳本和層疊樣式表,通常把腳本和樣式表分別保存在獨(dú)立的.js和.css文件中,然后在Web頁(yè)面中引用。為了符合模塊化的開發(fā)原則,通常不會(huì)將JavaScript代碼和CSS代碼放在同一個(gè)文件中。分散保存的JavaScript代碼應(yīng)該合并在一個(gè)文件中,樣式表也應(yīng)該合并,這樣可以使用戶在瀏覽網(wǎng)頁(yè)時(shí)只需下載一個(gè).js或者.css文件,這樣減少了HTTP請(qǐng)求,從而減少響應(yīng)時(shí)間,提高訪問速度。2減少http請(qǐng)求的有效手段使用客戶端緩存可以優(yōu)化Web性能,減少用戶等待的時(shí)間。減少HTTP請(qǐng)求的方式可以明顯提高用戶首次訪問Web站點(diǎn)的速度,客戶端緩存的使用,對(duì)于頁(yè)面的首次訪問是不會(huì)減少響應(yīng)時(shí)間的,對(duì)性能的提高會(huì)在再次訪問同一個(gè)頁(yè)面的時(shí)候體現(xiàn)出來(lái)。在設(shè)計(jì)Web頁(yè)面的時(shí)候,首次訪問的響應(yīng)時(shí)間并不是唯一需要考慮的。如果這樣,可以不在頁(yè)面上放置任何圖片、腳本和樣式表,就能夠把減少HTTP請(qǐng)求發(fā)揮到極致。然而,我們都知道,圖片、腳本和樣式表可以加強(qiáng)用戶體驗(yàn),但是又會(huì)讓頁(yè)面的加載時(shí)間更長(zhǎng)。通過對(duì)腳本,樣式表,圖片和Flash使用一個(gè)長(zhǎng)久的Expires頭,使這些組件被緩存,就使得在瀏覽器瀏覽后續(xù)的頁(yè)面時(shí)避免了不必要的HTTP請(qǐng)求。Web服務(wù)器使用Expires頭告訴Web客戶端它可以使用一個(gè)組件的當(dāng)前副本,直到指定的時(shí)間為止。如:它表示瀏覽器該響應(yīng)的有效性持續(xù)到2012年4月22日為止。如果為頁(yè)面中的一個(gè)圖片返回了這個(gè)頭,瀏覽器在后續(xù)的頁(yè)面瀏覽中會(huì)使用緩存的圖片,將HTTP請(qǐng)求的數(shù)量減少。3求中的acctor-encotch頭來(lái)標(biāo)識(shí)除了減少和限制不必要的HTTP請(qǐng)求來(lái)解決響應(yīng)時(shí)間的問題外,還可以通過減小HTTP響應(yīng)的大小,在傳輸前對(duì)文件進(jìn)行壓縮,進(jìn)一步減少響應(yīng)時(shí)間。從HTTP1.1開始,Web客戶端就可以通過HTTP請(qǐng)求中的Accept-Encoding頭來(lái)標(biāo)識(shí)對(duì)壓縮的支持:如果Web服務(wù)器在請(qǐng)求的文件頭中檢測(cè)到上面的代碼,就會(huì)以客戶端列出來(lái)的方法中的一種來(lái)壓縮響應(yīng)內(nèi)容。Web服務(wù)器把壓縮方法通過響應(yīng)文件頭中的Content-Encoding來(lái)返回給瀏覽器:Gzip是目前最盛行也是最有效的壓縮方式,這是由GNU項(xiàng)目開發(fā)的一種免費(fèi)的格式,并被標(biāo)準(zhǔn)化為RFC1952。另外一種壓縮格式是deflate,但是它的效果較差而且不太流行。Gzip大約可以減少70%的響應(yīng)大小,目前約有90%通過瀏覽器傳輸?shù)幕ヂ?lián)網(wǎng)互換支持gzip格式。Gzip壓縮所有可能的文件類型,是減少文件體積,增加用戶體驗(yàn)的最好方法。4優(yōu)化頁(yè)面元素4.1樣式表的放置位置除了HTML文檔外,其他很多組件也都是呈現(xiàn)頁(yè)面內(nèi)容所必需的。Web頁(yè)面的所有內(nèi)容,通常是按照他們?cè)谖臋n中出現(xiàn)的先后順序下載的。樣式表在Web頁(yè)面中放置的位置對(duì)于Web頁(yè)面性能的影響是很明顯的。如果把樣式表放在頁(yè)面底部,實(shí)際產(chǎn)生的頁(yè)面速度比放在頁(yè)面頂部慢;將樣式表放在文檔頂部的head標(biāo)簽中,能使頁(yè)面加載得更快。4.2腳本對(duì)web頁(yè)面的影響腳本帶來(lái)的問題就是它阻攔了頁(yè)面的平行下載。HTTP1.1規(guī)范建議,瀏覽器每個(gè)主機(jī)名的并行下載內(nèi)容不超過兩個(gè)。如果你的圖片放在多個(gè)主機(jī)名上,你可以在每一個(gè)并行下載中同時(shí)下載2個(gè)以上的文件。但是當(dāng)下載腳本時(shí),瀏覽器就不會(huì)同時(shí)下載其它文件了,即使是主機(jī)名不相同,這是因?yàn)槟_本可能使用document.write來(lái)修改頁(yè)面內(nèi)容,因此瀏覽器會(huì)等待,以確保頁(yè)面能夠恰當(dāng)?shù)夭季?。腳本對(duì)Web頁(yè)面的影響表現(xiàn)在兩個(gè)方面,一是腳本會(huì)阻塞其后面內(nèi)容的呈現(xiàn),另外腳本會(huì)阻塞對(duì)其后面組件的下載。所以,如果將腳本放在頁(yè)面頂部,頁(yè)面中的所有內(nèi)容都位于腳本之后,整個(gè)頁(yè)面的呈現(xiàn)和下載都會(huì)被阻塞,直到腳本加載完畢。放置腳本的最好地方是頁(yè)面的底部。這不會(huì)阻止頁(yè)面內(nèi)容的呈現(xiàn),而且頁(yè)面中的可視組件可以盡早下載,雖然其請(qǐng)求時(shí)間較長(zhǎng),但對(duì)頁(yè)面影響很小,可以很好提高用戶的體驗(yàn)。5與前端性能相關(guān)的問題對(duì)于Web應(yīng)用開發(fā)人員來(lái)說,在編寫Web應(yīng)用時(shí)注意性能問題。本文僅針對(duì)Web應(yīng)用的前端性能優(yōu)化作了簡(jiǎn)要分析,提出了一些Web站點(diǎn)前端性能優(yōu)化技術(shù)的方法,但還有很多與前臺(tái)性能相關(guān)的問題還沒有涉及到,比如避