戴全平

摘 要 隨著科學(xué)技術(shù)的飛速發(fā)展，人們對(duì)于各種Web應(yīng)用提出了更高的要求，如果不能及時(shí)對(duì)應(yīng)用進(jìn)行性能優(yōu)化，則其必然會(huì)被時(shí)代所淘汰。通常情況下，Web應(yīng)用的性能優(yōu)化可以通過(guò)前端優(yōu)化和后端優(yōu)化實(shí)現(xiàn)，本文主要針對(duì)前端性能的優(yōu)化進(jìn)行簡(jiǎn)要分析。

【關(guān)鍵詞】Web應(yīng)用 前端 性能優(yōu)化

現(xiàn)如今，Web技術(shù)飛速發(fā)展，傳統(tǒng)的以文檔為核心的HTML以及XHTML標(biāo)準(zhǔn)已經(jīng)逐漸無(wú)法滿足實(shí)際需求。在這種情況下，新的標(biāo)準(zhǔn)設(shè)置了更加強(qiáng)大的應(yīng)用編程接口和適用于交互、多媒體等的標(biāo)簽，但是，這些功能的實(shí)現(xiàn)都必須建立在更加優(yōu)越的前端性能上，因此，做好Web應(yīng)用前端性能的優(yōu)化非常重要。

1 HTTP請(qǐng)求優(yōu)化

在對(duì)HTTP請(qǐng)求進(jìn)行優(yōu)化時(shí)，必須在保證Web應(yīng)用處理性能的基礎(chǔ)上，減少頁(yè)面的請(qǐng)求次數(shù)，從而對(duì)初次訪問(wèn)用戶的等待時(shí)間進(jìn)行縮減。具體來(lái)講，一是可以利用圖片地圖，因?yàn)樵谡军c(diǎn)導(dǎo)航環(huán)節(jié)，超鏈接是最為常見(jiàn)的一種應(yīng)用形式，其本身附帶有一定的文本，并且被關(guān)聯(lián)到了目標(biāo)URL上。從美觀性考慮，可以將超鏈接關(guān)聯(lián)到圖片上，通過(guò)這種形式，可以在不改變頁(yè)面外觀感受的情況下，利用圖片地圖來(lái)減少HTTP請(qǐng)求，提高導(dǎo)航的效率；二是利用內(nèi)聯(lián)圖片，指將圖片包含在Web頁(yè)面中，但是不需要添加額外的HTTP請(qǐng)求，這種方式允許將小塊數(shù)據(jù)內(nèi)聯(lián)為立即數(shù)，將數(shù)據(jù)放在其URL之中；三是對(duì)腳本和樣式表進(jìn)行合并。通常情況下，多數(shù)Web站點(diǎn)的構(gòu)建中都會(huì)用到Java Script腳本以及層疊樣式表，而且兩者分別存儲(chǔ)在不同的文件中，在Web頁(yè)面引用。從應(yīng)用開(kāi)發(fā)中的模塊化思想考慮，一般情況下，Java Script代碼以及CSS代碼不會(huì)被放在同一個(gè)文件中，而應(yīng)該將分散保存的Java Script代碼合并在一起，同時(shí)對(duì)樣式表進(jìn)行合并，使得用戶在瀏覽網(wǎng)頁(yè)時(shí)，只需要下載一個(gè).js文件或者.css文件，減少系統(tǒng)的響應(yīng)時(shí)間。

2 客戶端緩存優(yōu)化

通過(guò)客戶端緩存的方式，能夠在很大程度上對(duì)Web性能進(jìn)行優(yōu)化，極大的縮減用戶的等待時(shí)間。客戶端緩存的應(yīng)用，雖然無(wú)法在用戶初次訪問(wèn)網(wǎng)頁(yè)時(shí)對(duì)響應(yīng)時(shí)間進(jìn)行減少，不過(guò)如果用戶需要再次對(duì)同一個(gè)頁(yè)面進(jìn)行訪問(wèn)，則性能的優(yōu)化效果就會(huì)充分體現(xiàn)出來(lái)。在針對(duì)Web頁(yè)面進(jìn)行設(shè)計(jì)時(shí)，首次訪問(wèn)的響應(yīng)時(shí)間非常重要，但是其并不是唯一需要考慮的因素。如果只考慮縮減首次訪問(wèn)的響應(yīng)時(shí)間，則只需要去掉頁(yè)面中的圖片、樣式表和腳本，就能夠?qū)TTP的請(qǐng)求減少到極限。但是實(shí)際上，如果采用這種方式，用戶的體驗(yàn)也就難以保證。

而通過(guò)對(duì)客戶端緩存的優(yōu)化，可以利用長(zhǎng)久的Expires頭，實(shí)現(xiàn)對(duì)圖片、樣式表、腳本乃至Flash等的緩存，使得在進(jìn)行后續(xù)頁(yè)面的瀏覽時(shí)，減少不必要的HTT請(qǐng)求，提高訪問(wèn)速度。Expires頭的使用，實(shí)際上是告訴Web客戶端其能夠在指定的時(shí)間內(nèi)，使用一個(gè)組件的當(dāng)前副本。例如，Expires：Thu，1 Apr 2016 12：00：00GMT，表示瀏覽器相應(yīng)的有效性持續(xù)到2016年4月1號(hào)。若頁(yè)面中的圖片返回到了這個(gè)頭，在進(jìn)行后續(xù)頁(yè)面瀏覽時(shí)，會(huì)繼續(xù)使用緩存的圖片，從而減少HTTP請(qǐng)求的數(shù)量。

3 頁(yè)面元素優(yōu)化

一方面，可以將CSS設(shè)置在頁(yè)面的頂部。對(duì)于Web頁(yè)面而言，包括HTML文檔在內(nèi)的許多組件都是必須的，其能夠?qū)⒉煌捻?yè)面內(nèi)容呈示在用戶面前，Web頁(yè)面中內(nèi)容可以依照其在文檔中出現(xiàn)的順序進(jìn)行下載。以樣式表為例，其在Web頁(yè)面中的位置直接影響著頁(yè)面的整體性能，如果將其放在底部，則產(chǎn)生頁(yè)面的速度會(huì)減緩，如果將其放在文檔頂部的head標(biāo)簽中，則頁(yè)面的加載速度會(huì)有所提升。

另一方面，可以將腳本設(shè)置在頁(yè)面底部。腳本是Web頁(yè)面設(shè)置中不可或缺的組件，但是其存在會(huì)在一定程度上阻攔頁(yè)面的平行下載。在HTTP1.1規(guī)范中，建議瀏覽器的每一個(gè)主機(jī)名并行下載的內(nèi)容不能超過(guò)兩個(gè)。因此，如果圖片被放在多個(gè)主機(jī)名上，則可以在每一個(gè)并行下載中，同時(shí)下載多個(gè)文件。而如果需要下載腳本，瀏覽器會(huì)自動(dòng)屏蔽其他文件的下載，即使采用不同的主機(jī)名。之所以如此，是由于腳本本身能夠使用document.write進(jìn)行頁(yè)面內(nèi)容的改寫(xiě)，為了保證頁(yè)面布局的合理性，瀏覽器會(huì)出現(xiàn)等待的情況。因此，可以將腳本設(shè)置在頁(yè)面底部，這樣不會(huì)阻止頁(yè)面內(nèi)容的呈現(xiàn)，雖然請(qǐng)求時(shí)間會(huì)有所延長(zhǎng)，但是可以保證良好的用戶體驗(yàn)。

4 結(jié)語(yǔ)

總而言之，在進(jìn)行Web應(yīng)用的編寫(xiě)時(shí)，必須關(guān)注其性能問(wèn)題，針對(duì)前端性能進(jìn)行優(yōu)化，在保證良好用戶體驗(yàn)的同時(shí)，提升頁(yè)面的訪問(wèn)速度，減少響應(yīng)時(shí)間，以滿足人們對(duì)于Web應(yīng)用在性能方面的各種要求。

參考文獻(xiàn)

[1]王成，李少元，鄭黎曉，等.Web前端性能優(yōu)化方案與實(shí)踐[J].計(jì)算機(jī)應(yīng)用與軟件，2014，31（12）：89-95，147.

[2]林丁報(bào)，景宏磊.Web應(yīng)用前端性能優(yōu)化淺析[J].科技資訊，2011（19）：25.

[3]丁海鵬，張旭陽(yáng).基于Web的應(yīng)用系統(tǒng)前端頁(yè)面性能優(yōu)化[J].福建電腦，2012，28（05）：11-12.

作者單位

武漢紡織大學(xué)計(jì)算機(jī)學(xué)院 湖北省武漢市 430200