基于前端的Web性能優化

彭玲玲+李詩瑩+馮爽

摘 要

互聯網的高速發展極大增強了用戶與頁面的交互，網站性能逐漸成為Web產品市場成敗和評測網站用戶體驗的重要指標。文中基于Web前端，提出一種前端優化方案，在保持后臺的代碼及數據庫不變的前提上，極大程度提升了Web站點的性能。

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

1 前言

信息技術的快速發展極大提高了用戶對網站的期望值。對于用戶而言，如何從站點中以最快速度獲取所需內容是其評價Web前端性能的重要指標；對于網站提供者，如何在同一時間允許多用戶訪問并獲得良好的用戶體驗是其工作中的一大痛點。因此，Web前端性能優化是一個重要研究課題。國外雅虎、微軟、Google等公司對Web的優化都有不同的見解。國內騰訊、阿里巴巴等企業在這方面做了相關研究，比如網絡協議本身的研究與優化及應用系統性能優化的研究。針對Web站點的性能優化，分為前端優化以及優化。本文提出了一種基于Web前端性能的優化方案，包括頁面元素優化、緩存優化、以及HTTP請求優化。

2 優化方案

2.1 HTTP的請求優化

減少頁面的HTTP請求數目是HTTP的優化核心內容，其基本思想是以減少站點與服務器的連接次數為代價來降低網頁相應的延遲。CSS、JavaScript及背景圖片等外部文件，是構成一個設計良好的網頁不可或缺的因素。豐富多彩的網頁內容能夠吸引更多的用戶，同時良好的用戶體驗和交互性更能增加用戶的粘性。由于HTTP協議的無狀態性，用戶每訪問一次站點，客戶端都將重新向服務器請求所有的文件。而每個組件都須向服務器重新發送一次HTTP請求才能保證呈現整個網頁頁面，如此大量的HTTP重復請求極大程度影響了網站速度。減少HTTP的請求次數可以增加網頁的穩定性，提高網頁的加載速度。

通過CSS Sprites技術的改進來減少頁面HTPP的請求次數。網頁中加載的50%資源是圖片，CSS Sprites技術是一種網頁圖片應用處理方式，其基本思想是將一個頁面所涉及到的所有零散圖片都包含在一幅大圖中，從而將許多零散圖片所對應的HTTP請求轉變成一個大圖所對應的HTTP請求。這種方法極大程度減少了頁面的HTTP請求數量，當用戶訪問頁面時，載入的圖片會按照一幅大圖集中呈現，而不再像以前那樣一幅一幅地緩慢呈現，視覺效果極佳。

2.2 Web緩存優化

當用戶第一次訪問某Web頁面時，每個組件都會向服務器發送HTTP請求以下載整個頁面。但實際情況是，用戶在一定時間內可能重復訪問某頁面，反復從服務器下載組件極大影響網站速度。試想如果在訪問某頁面時將下載的組件全部緩存起來，在后續第二次至更多次的訪問時，瀏覽器直接從緩存數據中讀取。從而避免不必要的HTTP請求，提升網頁的響應速度。比如京東首頁的加載，當第二次加載首頁時，加載時間將會有50%的提升，這是因為網頁中的一些資源被客戶端緩存，在網頁二次加載的時候可直接應用客戶端緩存數據，而不需重新從遠程服務器請求資源。

緩存優化旨在提高系統的利用率，是一種處于用戶和Web服務器間的緩存機制。其基本內容是在現有的網絡架構中增加一層，即將用戶訪問頻次高的信息或內容放到附近或者是本地，在后續地訪問中用戶就可通過就近獲取相關信息，從而直接向本地服務器獲取網絡資源。Web緩存通過信息的本地化來加快網頁的瀏覽速度，極大程度上節省了網絡帶寬，減輕了服務器的負荷量，進一步加快了網頁的瀏覽速度。

2.3 頁面元素的優化

在對站點進行訪問的時候，用戶總是期待瀏覽器以最快的顯示所內容，快速實現可視化反饋。組件的下載順序通常是依照它們在文檔中的順序，而對于頁面中極其重要的組件，如樣式表和腳本等，合理優化這些頁面元素將直接影響頁面內容呈現的速度。頁面元素的優化其中包括HTML優化，內嵌的CSS優化以及JavaScript的優化。

HTML優化包括：標簽語義化，刪除不必要的HTTP協議頭，刪除元素多余的默認屬性等。CSS優化包括：將CSS文件放在文檔head標簽中以提升頁面逐步渲染速度，編寫高校的CSS選擇符。JavaScript代碼的優化包括：管理作用域，高校的數據存取，流控制，字符串優化。

3 小結

伴隨著互聯網的快速發展，網站的性能越來越受到重視。本文結合Web前端的構成，分別從HTTP請求、Web緩存、頁面元素這三個角度詳細論述了優化移動Web前端性能的方案，一定程度上提高了前端頁面的性能。

參考文獻

[1]Poggi，N，Carra，D，Gavalda，R，et al.A Methodology for the Evaluation of High Response Time on E-Commerce Users and Sales.Information Systems Frontiers，2014，16（05）：867-885.

[2]楊敏等譯.Andrew B.King.Web站點優化[M].北京：機械工業出版社，2009.

[3]Huisong W，Jun W，Qun D.et al.A new approach to construing CSS codes based on factor graphs.Information Sciences，2007，178（07）：1893-1902.

[4]Barish G，Obraczke K.World wide web caching：Trends and techniques.Communicaiton Magazine，2000，38（05）：178-184.

[5]余以勝.移動終端Web頁面的優化處理研究[J].計算機技術與應用，2014，40（07）：126-129.

作者單位

重慶文理學院軟件工程學院 重慶市 402160endprint