Web應(yīng)用的前端性能優(yōu)化

戴全平

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

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

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

1 HTTP請求優(yōu)化

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

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

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

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

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

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

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

4 結(jié)語

總而言之，在進(jìn)行Web應(yīng)用的編寫時(shí)，必須關(guān)注其性能問題，針對前端性能進(jìn)行優(yōu)化，在保證良好用戶體驗(yàn)的同時(shí)，提升頁面的訪問速度，減少響應(yīng)時(shí)間，以滿足人們對于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]丁海鵬，張旭陽.基于Web的應(yīng)用系統(tǒng)前端頁面性能優(yōu)化[J].福建電腦，2012，28（05）：11-12.

作者單位

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