Web應用的前端性能優化

戴全平

摘 要 隨著科學技術的飛速發展，人們對于各種Web應用提出了更高的要求，如果不能及時對應用進行性能優化，則其必然會被時代所淘汰。通常情況下，Web應用的性能優化可以通過前端優化和后端優化實現，本文主要針對前端性能的優化進行簡要分析。

【關鍵詞】Web應用 前端 性能優化

現如今，Web技術飛速發展，傳統的以文檔為核心的HTML以及XHTML標準已經逐漸無法滿足實際需求。在這種情況下，新的標準設置了更加強大的應用編程接口和適用于交互、多媒體等的標簽，但是，這些功能的實現都必須建立在更加優越的前端性能上，因此，做好Web應用前端性能的優化非常重要。

1 HTTP請求優化

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

2 客戶端緩存優化

通過客戶端緩存的方式，能夠在很大程度上對Web性能進行優化，極大的縮減用戶的等待時間。客戶端緩存的應用，雖然無法在用戶初次訪問網頁時對響應時間進行減少，不過如果用戶需要再次對同一個頁面進行訪問，則性能的優化效果就會充分體現出來。在針對Web頁面進行設計時，首次訪問的響應時間非常重要，但是其并不是唯一需要考慮的因素。如果只考慮縮減首次訪問的響應時間，則只需要去掉頁面中的圖片、樣式表和腳本，就能夠將HTTP的請求減少到極限。但是實際上，如果采用這種方式，用戶的體驗也就難以保證。

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

3 頁面元素優化

一方面，可以將CSS設置在頁面的頂部。對于Web頁面而言，包括HTML文檔在內的許多組件都是必須的，其能夠將不同的頁面內容呈示在用戶面前，Web頁面中內容可以依照其在文檔中出現的順序進行下載。以樣式表為例，其在Web頁面中的位置直接影響著頁面的整體性能，如果將其放在底部，則產生頁面的速度會減緩，如果將其放在文檔頂部的head標簽中，則頁面的加載速度會有所提升。

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

4 結語

總而言之，在進行Web應用的編寫時，必須關注其性能問題，針對前端性能進行優化，在保證良好用戶體驗的同時，提升頁面的訪問速度，減少響應時間，以滿足人們對于Web應用在性能方面的各種要求。

參考文獻

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

[2]林丁報，景宏磊.Web應用前端性能優化淺析[J].科技資訊，2011（19）：25.

[3]丁海鵬，張旭陽.基于Web的應用系統前端頁面性能優化[J].福建電腦，2012，28（05）：11-12.

作者單位

武漢紡織大學計算機學院 湖北省武漢市 430200