基于前端的Web性能優(yōu)化

彭玲玲+李詩瑩+馮爽

摘 要

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

【關鍵詞】前端 Web HTTP 性能優(yōu)化

1 前言

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

2 優(yōu)化方案

2.1 HTTP的請求優(yōu)化

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

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

2.2 Web緩存優(yōu)化

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

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

2.3 頁面元素的優(yōu)化

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

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

3 小結

伴隨著互聯(lián)網(wǎng)的快速發(fā)展，網(wǎng)站的性能越來越受到重視。本文結合Web前端的構成，分別從HTTP請求、Web緩存、頁面元素這三個角度詳細論述了優(yōu)化移動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站點優(yōu)化[M].北京：機械工業(yè)出版社，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頁面的優(yōu)化處理研究[J].計算機技術與應用，2014，40（07）：126-129.

作者單位

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