Web工程前端性能優(yōu)化

李曉峰

(昆明船舶設(shè)備研究試驗(yàn)中心人力資源部，云南昆明 650000)

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，越來越多的企業(yè)和政府搭建了門戶網(wǎng)站。Web應(yīng)用為了提升頁面利用率和用戶交互性體驗(yàn)，網(wǎng)頁容量不斷被加大，并在網(wǎng)頁中應(yīng)用大量JavaScript代碼及其框架技術(shù)［1］。這種變化，一方面使網(wǎng)頁的表現(xiàn)力更強(qiáng)，層次更豐富。但另一方面，復(fù)雜的實(shí)現(xiàn)、漂亮的界面背后隱藏的是增加客戶端流量、影響到網(wǎng)頁在瀏覽器中的解析效率、直接延遲了網(wǎng)頁加載時間，給客戶端性能帶來了壓力的同時，且破壞了用戶的整體體驗(yàn)［2］。針對這一問題，本文從HTTP請求數(shù)目及網(wǎng)頁元素兩個方面著手，對Web工程的前端性能提出了若干優(yōu)化方法，希望能對網(wǎng)站搭建的相關(guān)從業(yè)人員有所幫助。

1 Web前端優(yōu)化相關(guān)原理

客戶端完成通信通常需要HTTP協(xié)議和TCP協(xié)議。HTTP協(xié)議是Web應(yīng)用層協(xié)議，其是Web的核心。通過對HTTP協(xié)議進(jìn)行的一些研究［3－4］分析，提出了一些修改方法以降低檢索的延時，但在檢索延時對加載速度影響較小的情況下，實(shí)際應(yīng)用價值則較小。但HTTP本身依然決定著Web的通信形式，影響著Web前端的行為。HTTP協(xié)議一般由兩部分程序?qū)崿F(xiàn):一個客戶機(jī)程序和一個服務(wù)器程序，其分別運(yùn)行在不同端的系統(tǒng)中，通過HTTP報文的交換來進(jìn)行會話，HTTP協(xié)議規(guī)定了這些報文的格式以及客戶機(jī)和服務(wù)器的交換行為。TCP作為HTTP的底層傳輸協(xié)議［5］，當(dāng)HTTP客戶端發(fā)起一個與服務(wù)器的TCP連接，建立連接時，瀏覽器和服務(wù)器進(jìn)程便可通過套接字訪問TCP。TCP為HTTP提供了一個可靠的數(shù)據(jù)傳輸服務(wù)，所以一個客戶端進(jìn)程發(fā)出的每個HTTP請求報文最終均能完整的到達(dá)服務(wù)器。同樣，服務(wù)器發(fā)出的每個HTTP響應(yīng)報文也能完整到達(dá)客戶端。

HTTP協(xié)議的客戶端/服務(wù)器請求響應(yīng)機(jī)制程序，包含下面幾個步驟:

(1)發(fā)起請求?？蛻舳讼蚍?wù)器發(fā)起HTTP請求，如打開一個URL地址。

(2)建立連接?？蛻舳藢RL地址進(jìn)行域名解析后找到服務(wù)器IP，并與服務(wù)器建立TCP連接。瀏覽器通過發(fā)送一個TCP包，要求服務(wù)器打開連接，服務(wù)器也通過發(fā)送一個包來應(yīng)答用戶的瀏覽器，告知瀏覽器連接已打開。

(3)發(fā)送請求。打開連接后，客戶端發(fā)送請求信息到服務(wù)器端的相應(yīng)端口上，完成請求動作提交。

(4)發(fā)送響應(yīng)。服務(wù)器在處理完客戶端請求之后，向客戶端發(fā)送響應(yīng)消息。

(5)關(guān)閉連接。結(jié)束TCP/IP對話是通過客戶端和服務(wù)器端關(guān)閉套接字來實(shí)現(xiàn)的。

由圖1所示，用戶在獲取一個頁面時，分別經(jīng)歷的等待時間是:域名解析時間，即客戶端解析域名尋找服務(wù)器IP所需的時間;TCP建立連接時間，客戶端服務(wù)器建立連接時TCP3次連接時間;HTTP請求響應(yīng)時間，HTTP請求發(fā)送與服務(wù)器對該請求的響應(yīng)時間;響應(yīng)傳送時間，服務(wù)器響應(yīng)了請求后，將所請求的內(nèi)容下載到客戶端的時間;客戶端解析和響應(yīng)時間，客戶端得到響應(yīng)后解析顯示出的時間。本文主要從服務(wù)器響應(yīng)傳送時間與客戶端解析的響應(yīng)時間兩方面著手，分析介紹了一些Web工程前端的優(yōu)化方法。

圖1 HTTP協(xié)議的客戶端/服務(wù)器請求響應(yīng)流圖

2 Web前端優(yōu)化方法

2.1 HTTP請求優(yōu)化

HTTP請求優(yōu)化是指減少頁面的HTTP請求數(shù)目，即通過減少與服務(wù)器的連接次數(shù)來降低網(wǎng)頁響應(yīng)延遲。通常一個功能完善的網(wǎng)頁需引入JavaScript、CSS、背景圖片等［6］大量的外部文件。但由于HTTP協(xié)議不具備狀態(tài)性，每一次訪問均需要客戶端重新發(fā)送請求至服務(wù)器。要呈現(xiàn)整個頁面，頁面上的每個組件均要向服務(wù)器重新發(fā)送一次HTTP請求，這些組件所產(chǎn)生的大量請求累加是影響網(wǎng)站速度的主要原因。減少網(wǎng)頁元素是一個行之有效降低請求數(shù)目的方法，但在網(wǎng)頁內(nèi)容豐富的今天，通過削減網(wǎng)頁元素帶來的網(wǎng)頁功能性下降是不可接受的。于是就出現(xiàn)了兩種網(wǎng)頁元素合并方法，分別是樣式表(CSS)、腳本JavaScript合并壓縮技術(shù)與CSSSprites技術(shù)。

2.1.1 樣式表和腳本合并壓縮

樣式表CSS和腳本JavaScript是Web網(wǎng)頁的表現(xiàn)和行為，其共同決定著網(wǎng)頁表現(xiàn)樣式、網(wǎng)頁效果及網(wǎng)頁的交互特征，這是網(wǎng)頁中必不可少的元素。隨著Web系統(tǒng)架構(gòu)的復(fù)雜化，Web前臺系統(tǒng)開發(fā)也日益復(fù)雜。Web前臺架構(gòu)也逐漸的呈現(xiàn)出分層思想，將CSS與JavaScript分為3 層結(jié)構(gòu)［7］，分別是 base層、common 層和page層。其中，base層位于最底層，負(fù)責(zé)封裝不同瀏覽器對于CSS與JavaScript解析的差異，提供統(tǒng)一的接口，并擴(kuò)展底層接口，為common層和page層提供易用的接口。common層使用base層提供的接口，為page層提供可復(fù)用的組件。page層位于3層的最頂端，與頁面的具體需求相關(guān)聯(lián)。隨著Web前端架構(gòu)的發(fā)展，復(fù)雜化的Web前端架構(gòu)使Web前端工程師的分工更加明顯，同時減少了不必要的重復(fù)性代碼。但同時，網(wǎng)頁需引入的CSS與JavaScript文件個數(shù)卻增加了，即增加了HTTP請求數(shù)目。

Google公司與 Yahoo公司分別開發(fā)了 Google Closure Compiler與YUI Compiler工具用于樣式和腳本的壓縮。這兩個工具均是基于java的jar包。一般情況下，用Google Closure Compiler壓縮JavaScript腳本，用YUI Compiler壓縮樣式表CSS。

壓縮樣式表和腳本文件可減少其大小，合并樣式表和腳本文件可有效減少HTTP請求數(shù)目從而減少網(wǎng)頁下載時間。合并壓縮方式在CSS與JS資源越復(fù)雜的情況下，能得到顯著的優(yōu)化效果。

2.1.2 CSSSprites技術(shù)

CSSSprites技術(shù)是一種網(wǎng)頁圖片應(yīng)用處理方式［8］，是將一個頁面涉及到的所有零星圖片均包含到一張大圖中去，將諸多零星圖片對應(yīng)的眾多HTTP請求變成一個大圖所對應(yīng)的一個HTTP請求。該方法有效降低了頁面的HTTP請求數(shù)目，且在頁面被訪問時，載入的圖片不會像以前那樣每幅緩慢的顯示，視覺效果更優(yōu)。

2.2 網(wǎng)頁元素優(yōu)化

通常，Web統(tǒng)用80%以上的時間來加載頁面組件［9］，而對于個體頁面，在這80%以上的時間中又只用了10% ～20%的時間來下載HTML文檔，剩下的時間均用于下載網(wǎng)頁中的其他元素，如大量的圖片、JavaScript文件等。但HTML文檔與網(wǎng)頁元素是相輔相成的，如何在不改變網(wǎng)頁本身設(shè)計(jì)，不降低網(wǎng)頁質(zhì)量的情況下，對網(wǎng)頁進(jìn)行合理優(yōu)化來加快網(wǎng)頁的下載速度。針對這一問題，網(wǎng)頁元素優(yōu)化被提出，其主要包括Web工程中HTML的優(yōu)化，JavaScript的優(yōu)化和CSS樣式表的優(yōu)化。

2.2.1 HTML優(yōu)化

在前端的構(gòu)成中，HTML是必不可少的一部分，且是真正的展示“前端”。HTML文檔包括用于組織網(wǎng)頁結(jié)構(gòu)的HTML代碼，引入或內(nèi)嵌的CSS及JavaScript代碼等［10］。則對于HTML優(yōu)化的主要方法有:

(1)標(biāo)簽語義化?，F(xiàn)如今 Web標(biāo)準(zhǔn)均被稱做“DIV+CSS”或“層布局”，標(biāo)準(zhǔn)的主導(dǎo)思想是使用樣式表CSS來控制網(wǎng)頁中各元素的表現(xiàn)形式，包括位置、顏色、大小等。這種布局一定程度上弱化了標(biāo)簽的布局能力，將布局完全放到了樣式中進(jìn)行控制。這同時使網(wǎng)頁布局陷入大量的使用＜DIV＞標(biāo)簽作為結(jié)構(gòu)元素的誤區(qū)。這是一種樣式表CSS的濫用。

HTML提供了相當(dāng)豐富的標(biāo)簽，各標(biāo)簽均有各自的含義。應(yīng)充分利用并遵守各標(biāo)簽的“語義”。如表格形式的數(shù)據(jù)應(yīng)仍用TABLE布局，大段的文字內(nèi)容應(yīng)由＜P＞進(jìn)行分段而不是＜BR/＞，列表項(xiàng)應(yīng)放在UL或OL或DL中。這樣做的原因是保證在用戶去掉CSS顯示的情況下，網(wǎng)頁能盡量有效地將內(nèi)容的結(jié)構(gòu)層次顯示出來。若全部用＜DIV＞，當(dāng)去掉CSS后，整個網(wǎng)頁就失去了層次，只剩下一些雜亂的文字碎片。這并不符合Web標(biāo)準(zhǔn)對低配置兼容性的要求?！癉IV+CSS”布局方式具有代碼量少、結(jié)構(gòu)精簡、語義清晰等優(yōu)點(diǎn)，標(biāo)簽語義化則對搜索引擎更加友好。

(2)CSS與JavaScript文件外鏈。在HTML頁面中通常引用CSS、JavaScript代碼或文件來使頁面更生動豐富。HTML頁面引用CSS或JavaScript代碼有3種方式:內(nèi)嵌式、內(nèi)聯(lián)式和外鏈?zhǔn)?。?nèi)嵌式、內(nèi)聯(lián)式是將相關(guān)代碼寫入HTML文件中，外鏈?zhǔn)酵ㄟ^將CSS或JavaScript代碼打包后在相關(guān)網(wǎng)頁中引用。一般HTML文檔在頁面加載時總是會重新刷新，頁面中的內(nèi)容均會重新加載，內(nèi)嵌式、內(nèi)聯(lián)式寫入的內(nèi)容也一同重新加載。而當(dāng)CSS與JavaScript文件外鏈后，便可對該組件進(jìn)行緩存，頁面再次加載時會大幅減少下載組件時間。文件外聯(lián)對頁面的優(yōu)化是顯然易見的，甚至前文中介紹到的壓縮等方式均要求組件內(nèi)外鏈?zhǔn)健?/p>

2.2.2 JavaScript優(yōu)化

與CSS樣式表類似，頁面在加載腳本時，所有位于腳本后的內(nèi)容均會被阻塞。如今，網(wǎng)頁使用的HTTP協(xié)議為HTTP1.1，其規(guī)定瀏覽器在下載腳本時，并行下載是被禁止的。這表示頁面在下載腳本時是依次下載的，會占用相對多的時間，當(dāng)腳本處于頁面頂部時，加載腳本所帶來的效果是頁面會停止渲染，出現(xiàn)渲染空白。將腳本放在網(wǎng)頁底部比置于頁面頂部的效果好，且腳本較多時效果更佳。

2.2.3 CSS優(yōu)化

CSS樣式表決定了網(wǎng)頁的展現(xiàn)方式，定義了網(wǎng)頁中元素的位置，大小與效果，對呈現(xiàn)良好視覺的網(wǎng)頁有重要作用。CSS優(yōu)化的主要方法有:

(1)將CSS放到頁面頂部。網(wǎng)頁中的諸多元素，如圖片、腳本等是網(wǎng)頁下載中必須的，而CSS樣式表為網(wǎng)頁中的組件提供了其表現(xiàn)樣式、位置和格式信息。網(wǎng)頁在加載頁面內(nèi)容時一般情況下是順序解釋執(zhí)行的，即網(wǎng)頁元素是按照其在網(wǎng)頁中的順序下載的。而理論上若將樣式表放到頁面的最后位置，則網(wǎng)頁中的其他組件便可優(yōu)先下載，這可使得除了網(wǎng)頁樣式外的其他元素盡早展現(xiàn)給用戶。但若將樣式表放在底部后，會導(dǎo)致瀏覽器組織網(wǎng)頁內(nèi)容的逐步呈現(xiàn)，為了避免樣式變化時瀏覽器重繪頁面，瀏覽器會阻塞內(nèi)容的逐步呈現(xiàn)。在用戶的視覺回饋中，樣式表放在底部響應(yīng)要比樣式表放在頂部慢。所以一般情況下，樣式表CSS應(yīng)放到頁面頂部。

(2)避免CSS表達(dá)式。CSS表達(dá)式是一種使用動態(tài)設(shè)置CSS屬性的方式。但CSS表達(dá)式所帶來的嚴(yán)重性能問題:為了確保有效性，CSS表達(dá)式會進(jìn)行頻繁的求值，改變窗口大小、滾動頁面甚至移動鼠標(biāo)均會觸發(fā)表達(dá)式進(jìn)行求值，如此頻繁的求值會導(dǎo)致瀏覽器的性能受到嚴(yán)重影響。CSS表達(dá)式雖強(qiáng)大，但會給瀏覽器帶來嚴(yán)重的性能問題，拖慢網(wǎng)頁的加載速度，在可能的前提下，應(yīng)盡量避免使用CSS表達(dá)式。

3 結(jié)束語

介紹了Web工程前端優(yōu)化的相關(guān)原理，主要從服務(wù)器響應(yīng)傳送時間與客戶端解析的響應(yīng)時間兩方面著手，分別從HTTP請求優(yōu)化，網(wǎng)頁元素優(yōu)化兩個方面，介紹了幾種實(shí)用的Web前端優(yōu)化方法，并分析了各方法在具體工程中使用應(yīng)注意的事項(xiàng)。在不改變后臺數(shù)據(jù)及網(wǎng)頁本身的情況下，提高了Web系統(tǒng)進(jìn)行性能。

［1］中國互聯(lián)網(wǎng)絡(luò)信息中心.第34次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報告［R］.北京:中國互聯(lián)網(wǎng)絡(luò)信息中心，2014.

［2］Zona Research.The economic impacts of unacceptable web －site download speeds［R/OE］.(2011－12－11)［2014－10－05］http://www.motc.gov.tw/service.

［3］Mogul J C.The case for persistent－connection HTTP［C］.Boston:Proceedings of the ACM Sigcomm Conference，1995.

［4］Padmanabhan V N，Mogul J C.Improving world wide web latency［M］.California:Computer Science Division，1995.

［5］Kurose JF，Ross K W.計(jì)算機(jī)網(wǎng)絡(luò)［M］.陳鳴，譯.北京:機(jī)械工業(yè)出版社，2009.

［7］曹劉陽.編寫高質(zhì)量代碼Web前端開發(fā)修煉之道［M］.北京:機(jī)械工業(yè)出版社，2010.

［6］Souders S.High performance web sites:essential knowledge for front－end engineers［M］.America:O'Reilly Media，2007.

［8］Huisong W，Jun W，Qun D，et al.A new approach to constructing CSScodes based on factor graphs［J］.Information Sciences，2007，178(7):1893 －1902.

［9］King A B.Website optimization:speed，search engine ＆ conversion rate secrets［M］.America:O'Reilly Media，2008.

［10］桑德斯，劉彥博.高性能網(wǎng)站建設(shè)指南［M］.北京:電子工業(yè)出版社，2008.